• 情報処理Ⅱ 授業概要

      授業の目的

      授業で学ぶ技術

      Processingを用いて以下のプログラム技術の基礎を学ぶ

      また,論理的に画像・映像を設計する手続き的な造形表現を学ぶ.

      授業の進め方

      教材について

      授業時間外に発生する作業について

      課題について

      授業時間外の質問について

      必要機材

      授業用のデータを持ち運ぶストレージを用意してください.

      評価について

      出席数と提出された課題を元に,総合的に判断.

      第1回:Processing入門

      Processing導入

      Processingの特徴

      アプリケーションの実行

      演習室ではデスクトップにProcessingアイコンがあるのでそれを実行する.

      processing_icon

      エディタ

      ここにプログラムを描く.

      editer

      プログラムの実行と停止

      run_stop_button

      最初のサンプルプログラム

      サンプルプログラム

      灰色の背景に緑の円と青の正方形を描画するプログラム

      first_sample

      このプログラムの実行結果

      first_sample_result

      演習1:プログラムをコピーして実行する.

      Processingのエディタウィンドウへサンプルプログラムをコピー&ペーストして実行してみる.

      以下のプログラムをコピーするとよい.

      Code

      プログラムとは

      サンプルプログラムを元にプログラムの基本を解説する.

      プログラムはテキストデータ

      first_sample_text

      プログラムは複数の「Statement からできている.

      セミコロン(;)によって1つの文として区切る.

      first_sample_statement

      プログラム実行時,基本的には文が上から下へ,順番に逐次実行されていく.

      first_sample_sequential

      コメント:プログラムに影響を与えないメモ

      first_sample_comment

      文(Statement)の要素

      このプログラムの各文は以下の2種類の要素で成り立っている.

      命令(command)

      first_sample_command

      引数(引数)(parameters)

      first_sample_parameters

      最初のプログラムの命令

      最初のサンプルプログラムを読み解くために必要な基礎知識や命令を紹介する.

      また,命令の項の最後に記載する「例」のプログラムはコピーしてProcessingで実行することができる

      Processingの座標系について

      transform_orijin02

      画面サイズを決める.

      size()

      構文

      size( 水平方向のピクセル数, 垂直方向のピクセル数 )

      説明

      引数

      水平方向と垂直方向の大きさをピクセル単位で記述する.

      水平方向:600, 垂直方向:200 の画面を設定する.

      window_size

      Code

      https://processing.org/reference/size_.html

      背景に色を付ける.

      background()

      構文

      background( R値, G値, B値 )

      説明

      指定した色でスクリーンの全体の塗りつぶし描画を行う.

      引数

      スクリーンを R:225, G:204, B:0 で塗りつぶす.

      first_sample_bgcolor

      Code

      https://processing.org/reference/background_.html

      正方形を描画する

      square()

      構文

      square( 左上角X座標値, 左上角Y座標値, 正方形の一辺の長さ )

      説明

      正方形を描画する.

      引数

      square_corner

      X:120, Y:100の座標に一辺の長さが220の正方形を描画する.

      square_default

      Code

      https://processing.org/reference/square_.html

      正円を描画する

      circle()

      構文

      circle( 中心X座標値, 中心Y座標値, 円の直径 )

      説明

      正円を描画する.

      引数

      circle_params

      X:224, Y:184を中心点とした直径220の円を描画する.

      circle_default

      Code

      https://processing.org/reference/circle_.html

      図形の塗りつぶし色を設定する

      fill()

      構文

      fill( R値, G値, B値 )

      説明

      引数

      RGB値それぞれを0~255の間で決定する.

      fill_1

      Code

      https://processing.org/reference/fill_.html

      アルゴリズム

      各命令の構文や動作を覚えていくとプログラムの実行手順を読み取れるようになっていく. このようなプログラムの実行手順をアルゴリズムという.

      first_sample_algorithm

      プログラミングは,アルゴリズムを考え記述することが重要となる.

      演習2:サンプルプログラムの数値を変更する.

      最初のサンプルプログラムの引数(数値)部分を書き換え,気に入った画像を出力してみる.

      プログラムを実行し,気に入った画像が出力されるまで書き換えを繰り返す.

      作例

      first_sample_arrange

      Code

      演習3:サンプルプログラムの命令文を増やす.

      演習2で作成したプログラムを元に,独自に命令文を追加して気に入った画像を出力する.

      作例

      moonの暗い部分の正円は,中心点がスクリーン外なのでY座標値がマイナスとなっていることに注目.

      first_sample_arrange2

      Code

      プログラムファイルの保存

      作成したプログラムは資産になるので,有用なものはできるだけ保存すること.

      ファイルの保存方法

      save_as

      新規にファイルを作成しない場合は「保存」を行い上書きをする.

      Processingのデータ形式

      ファイル形式(拡張子): .pde

      file_in_folder

      演習4:プログラムを保存する.

      演習3で作成したプログラムを保存する.

      デ情ロゴに使う命令

      デ情ロゴ作成に挑戦する.

      dinfo_logo_sample

      楕円を描画する.

      ellipse()

      構文

      ellipse( 中心X座標, 中心Y座標, 楕円の横幅, 楕円の高さ )

      ellipse_center

      説明

      楕円を描画する.

      引数

      ellipse_default

      Code

      https://processing.org/reference/ellipse_.html

      図形の塗りつぶしを半透明にする.

      fill()

      構文

      fill( R値, G値, B値, Alpha値 )

      説明

      RGB後に不透明(アルファ)値を追加することで,塗色を半透明にできる.

      引数

      Alpha値もそれぞれを0~255の間で決定する.

      0: 完全透明 ↔ 255 : 不透明

      rect_02

      Code

      図形の塗りつぶしをグレースケールで設定する.

      fill()

      構文

      fill( Gray値 )

      fill( Gray値, Alpha値 )

      説明

      RGB値の代わりにGray値を記述することで,グレースケールの塗色を指定できる. background()でも使える. アルファ値を使うこともできる.

      引数

      Gray値も0~255の間で決定する.

      0: Black ↔ 255 : White

      gray_scale

      Code

      線を消去する.

      noStroke()

      構文

      noStroke()

      説明

      図形のアウトラインの線を描画しないようにする.

      引数

      なし

      noStroke_

      Code

      https://processing.org/reference/noStroke_.html

      演習5:楕円とマスクを使った描画

      楕円を使って黒い三日月状の模様を作る.

      作例

      gray_moon

      Code

      演習6:デ情ロゴを作る.

      下絵を読み込む

      1. 以下のプログラムを作り,ファイルを保存する.

        Code
      2. JPGファイル「dinfo_logo.jpg」をTeamsの「ホームページ」からダウンロードする.

      3. ダウンロードしたJPGファイル「dinfo_logo.jpg」をpdeファイルのあるフォルダにコピーする.

        dinfo_logo_folder

      4. プログラムを実行し,背景にJPGファイルが表示されることを確認する.

        dinfo_logo_jgp

      大きな楕円部分を作る.

      dinfo_logo_daen

      Code

      小さな楕円マスク部分を作る.

      dinfo_logo_daen_mask

      Code

      残りの部分を自分で作ってみる.

      下の方に作例プログラムを乗せるが,自分なりに作ってみる.

      仕上げ

      全体ができたら最後に以下の仕上げを行う.

      下絵を非表示にする.

      読み込み部分3行をコメントアウトする.

      dinfo_logo_bg_off

      Code

      アウトラインの線を非表示にする.

      noStroke()を追加する.

      dinfo_logo_noStroke

      Code

      塗り・マスク色を整える.

      作例

      dinfo_logo_sample

      Code

       

      第2回:図形描画

      Processing再入門

      自分のPCにおけるProcessingの起動

      以下のリンクよりProcessingをダウンロードする.

      http://processing.org/

      Mac

      「アプリケーション」から実行

      exe_mac

      Windows

      exe_windows

      フォント(エディタ・コンソール)の変更(任意)

      font_change_02

      プログラムを書く際に忘れがちなこと

      コメント

      スラッシュ/を2つ使ったもの.

      Code

      スラッシュとアスタリスク*を組み合わせたもの.

      Code

      用途

      例1

      命令のメモとして用いる.

      divide_window

      Code

      例2

      プログラムの一部を無効にする.

      分かりやすく一時的にグリッドを引き,提出版では非表示にする,という使い方ができる.

      divide_window_noline

      Code

      補足

      課題提出においてコメントは重要です.

      https://processing.org/reference/comment.html

      コーディングに便利なキーボードの使い方(Win)

      文字消去

      カーソル移動

      選択

      連続した線による表現

      draw_line_practice02

      線を描画する

      line()

      構文

      line( 始点X座標値, 始点Y座標値, 終点X座標値, 終点Y座標値 )

      説明

      2点間に1本の線を描画する.

      引数

      始点と終点のX,Y座標値を記述する.

      例1

      始点X,Y座標値:(30, 20)から終点X,Y座標値: ( 85, 75)に線を描画する.

      line_0

      Code

      例2

      line_three

      Code

      https://processing.org/reference/line_.html

      線の太さを設定する

      strokeWeight()

      構文

      strokeWeight( 太さピクセル数 )

      説明

      線の太さをピクセル単位で設定する.

      引数

      太さのピクセル数を記述する.

      strokeWeight_

      Code

      https://processing.org/reference/strokeWeight_.html

      線の端の形状を変更する.

      strokeCap()

      構文

      strokeCap( ROUND or SQUARE or PROJECT )

      例1

      線の端の形状を丸くする.

      draw_stroke_cap_round

      Code

      例2

      終端を四角形にする.

      draw_stroke_cap_square

      Code

      例3

      終端を突き出し形状にする.

      draw_stroke_cap_project

      Code

      https://processing.org/reference/strokeCap_.html

      塗りつぶしを消去する

      noFill()

      構文

      noFill()

      説明

      塗りつぶしを無効にする.

      noFill_

      Code

      https://processing.org/reference/noFill_.html

      演習1

      1. line()を複数使用し,画面左端から始まり右端で終わる連続した線を自由に描画する.

        条件

        • スクリーンサイズ: 400, 400

        • 線の数や長さは自由

        draw_line_practice01

      2. 各線の太さや終端の形状を変化させ,より動きのある画面を作ってみる.

      draw_line_practice02

      1. 作成したプログラムは後の演習で再利用するので,分かりやすい場所に保存しておく.

      2. 作例のプログラム

      Code

      色の書式HSBによる表現

      lines_hsb

      線の色を変える

      stroke()

      構文

      stroke( R値, G値, B値 )

      説明

      引数

      RGB値それぞれを0~255の間で決定する.

      例1

      色を指定して線を描画する.

      stroke_line

      Code

      例2

      色を指定して図形の(枠)線を描画する.

      stroke_square

      Code

      例3

      line_three_color

      Code

      https://processing.org/reference/stroke_.html

      カラーモード

      colorMode()

      色の書式を変える.

      構文

      いずれかを用いる.

      RGBモードを指定

      colorMode( RGB, 最大値 )

      RGBモードを指定(各チャンネルの最大値を指定)

      colorMode( RGB, Rの最大値, Gの最大値, Bの最大値 )

      RGBモードを指定(各チャンネルとアルファの最大値を指定)

      colorMode( RGB, Rの最大値, Gの最大値, Bの最大値, アルファの最大値 )

      HSBモードを指定

      colorMode( HSB, 最大値 )

      HSBモードを指定(各チャンネルの最大値を指定)

      colorMode( HSB, 色相の最大値, 彩度の最大値, 輝度の最大値 )

      HSBモードを指定(各チャンネルとアルファの最大値を指定)

      colorMode( HSB, 色相の最大値, 彩度の最大値, 輝度の最大値, アルファの最大値 )

      説明

      引数

      例1

      RGBモード最大値1.0で指定した例

      colormode_rgb

      Code

      例2

      HSBモードで指定した例

      colormode_hsb

      Code

      例3

      HSBモードでアルファを指定した例

      colormode_hsb_alpha

      Code

      https://processing.org/reference/colorMode_.html

      演習2

      前回の演習で作成したプログラムに色を付け,線に色相のグラデーションをつける.

      lines_hsb

      作例のプログラム

      Code

      ブレンドモードによる表現

      sippou

      ブレンドモードを設定する.

      blendMode()

      構文

      blendMode( モード )

      説明

      図形描画時に,下に描かれた内容に対する効果を変更する.

      引数

      以下のモードからいずれかを記述する.

      Photoshop等の描画モードと大まかに対応している.

      例1:加算

      図形を重ねるほど白に近づく. 白の上に重ねると何も変化が起きない.

      blendmode_add

      Code

      例2:減算

      図形を重ねるほど黒に近づく. 白の上に重ねると色が補色になるので使いづらい.

      blendmode_subtract

      Code

      例3:比較(暗)

      図形を重ねるとRGB各値の小さい値が選ばれる. 黒の上に重ねると何も変化が起きない.

      blendmode_darkest

      Code

      例4:比較(明)

      図形を重ねるとRGB各値の大きい値が選ばれる. 白の上に重ねると何も変化が起きない.

      blendmode_lightest

      Code

      例5:差の絶対値

      図形を重ねると,下の色とのRGB各値の差が選ばれる. 同色の図形を重ね合わせ,重なった部分を抜く表現に有用.

      blendmode_difference

      Code

      例6:除外

      差分と同じだが,RGBの差をマイルドにしたもの. 重なった部分が完全には抜かれない.

      blendmode_exclusion

      Code

      例7:乗算

      図形を重ねるほど黒に近づく. 減算と近いが,白の上に重ねても色が補色にならないのでこちらが使いやすい.

      blendmode_multiply

      Code

      例8:スクリーン

      図形を重ねるほど白に近づく. 加算と近いが,若干結果が異なるので好みで使い分ける.

      blendmode_screen

      Code

      演習3

      七宝(しっぽう)模様を作る.

      sippou

      条件

      1. 9つの正円を描画する.

        sippou_6circles

      2. ステップ1の上に16個の正円を描画する.

        sippou_16circles

      3. ブレンドモード(差の絶対値)命令文を記述する.

        sippou_blendmode

      4. 以下の色指定を記述する.

        • background( 255, 0, 0 );

        • fill( 0, 255, 255 );

        sippou

      5. 以下,完成プログラム

        Code

      円弧による表現

      ougi

      度(度数法)をラジアン(弧度法)に変換する.

      radians()

      構文

      radians( 角度 )

      説明

      例1

      45°をラジアンへ変換した値をコンソールに表示する.

      Code

      radians_45

      例2

      180°をラジアンへ変換した値をコンソールに表示する.

      Code

      radians_180

      詳しい使用例は次の「円弧の描画」で紹介する.

      https://processing.org/reference/radians_.html

      円弧を描画する

      arc()

      構文

      arc( 中心のX座標, 中心のY座標, 横の直径, 縦の直径, 弧の始まりのラジアン, 弧の終わりのラジアン, モード )

      角度をラジアンへ変換する命令を含めると以下のようになる.

      arc( 中心のX座標, 中心のY座標, 横の直径, 縦の直径, radians( 弧の始まりの角度 ), radians( 弧の終わりの角度 ), モード );

      arc_zukai

      説明

      引数

      例1

      45°から始まり,270°で終わるオープンな弧

      arc_open

      Code

      例2

      45°から始まり,270°で終わる閉じた弧

      arc_chord

      Code

      例3

      45°から始まり,270°で終わるパイ状の弧

      arc_pie

      Code

      例4

      円弧を用いた沈む夕日のような表現

      arc_moon

      Code

      https://processing.org/reference/arc_.html

      演習4

      扇柄を作る.

      ougi

      条件

      1. 一番大きな弧をPIE指定で描画する.

        ougi_Larc

      2. 大きさを変えた弧を3つ描画する.

        ougi_arcs

      3. 線の太さや色を好みで設定する.

        ougi

      4. 余裕があれば下部分を削る表現に挑戦する.

        ougi_ad

      5. 以下,完成プログラム

        Code

      座標変換による表現

      5petals_flower

      座標系( Coordinate system )

      Processing の座標系

      Processing のようなスクリーン(二次平面)上で図形の操作を行うアプリケーションにおいては,2次元の座標系が導入されている.

      Code

      transform_origin

       

      座標変換とは

      この座標系(X軸,Y軸,原点)を並行移動,回転,拡大縮小することを座標変換という. 図形が変換されるのではないことに注意

      平行移動

      window_transform_translation_


      回転

      window_transform_rotate_


      拡大縮小

      window_transform_scale_

      座標変換を実行した後に図形描画を行うことにより,ウィンドウ上では図形が平行移動,回転または拡大縮小したように描画される.

      平行移動

      translate()

      構文

      translate( X移動量, Y移動量 )

      説明

      平行移動を行わず描画を行った場合

      transform_origin02_draw

      平行移動を行った後に描画を行った場合

      transform_translate

       

      transform_translate_draw

      引数

      移動させるX,Y値を記述する.

      シンプルな家の模様を複数描画する. 同じ構造の図形を繰り返し描画する際,よりシンプルにできる.

      house_02

      Code

      https://processing.org/reference/translate_.html

      回転

      rotate()

      構文

      rotate( ラジアン )

      角度(°)を使いたい場合はこう書くとよい.

      rotate( radians( 角度 ) )

      説明

      座標を原点を中心に時計回りに回転させる.

      座標系の回転のイメージ

      transform_rotation

       

      描画

      transform_rotation_draw

      引数

      回転するラジアンを記述する. マイナス「-」の値を指定すると反時計回りに回転する.

      例1

      原点を中心に15°回転させ,矩形描画を行う.

      transform_rotate_simple_rect

      Code

      例2

      スクリーン中央を中心に回転させたい場合

      transform_rotate_center_simple_rect

      1. スクリーン中心へ平行移動を行う.

      transform_translate_center

      1. 座標を回転させる.

      transform_translate_center_rotate

      1. 図形の描画を行う. 手順2に戻る.

      transform_translate_center_rotate_draw

      Code

      例3

      時計の針のような描画

      Code

      https://processing.org/reference/rotate_.html

      拡大縮小

      scale()

      構文

      scale( 拡大率 ) scale( X拡大率, Y拡大率 )

      説明

      拡大縮小を行わず描画を行った場合

      transform_origin02_draw

      拡大縮小を行った後に描画を行った場合

      図形の大きさだけでなく,2つの図形の間隔も大きくなる.

      transform_scale_gainen02

      引数

      見た目の大きさはかわっているが,rect()渡している値は同じであることに注目

      transform_scale_simple_rects

      Code

      https://processing.org/reference/scale_.html

      演習5

      シンプルな花の模様を作成する.

      5petals_flower

      条件

      1. 座標系をスクリーン中心へ平行移動し,花弁用の楕円を1つ描画する. 楕円は少しX軸方向(右方向)へずらしておく.(これには平行移動は使わないこと)

        5petals_flower_firstellipse

      2. 座標系を72°回転させて同じ楕円を1つ描画する.

        5petals_flower_secondellipse

      3. ステップ2を繰り返し,計5個の楕円を描画する.

        5petals_flower_5ellipses

      4. 中心に楕円を一つ描画する.

        5petals_flower_base

      5. 回転(-18°)命令文を1つ目の楕円描画直前に挿入する.

        5petals_flower_rot_fix

      6. 線の太さや各種色を設定する.

        5petals_flower

      7. 以下,完成プログラム

        Code

      座標変換の組み合わせ

      復習を兼ねて座標変換の組み合わせを解説する.

      平行移動と回転の組み合わせ

      平行移動+回転

      1. 平行移動

      transform_translate

      2. 回転

      transform_translate_rotation

      3. 図形描画

      transform_translate_rotation_draw

      回転+平行移動

      あまり推奨しない

      1. 回転

      transform_rotation

      回転後の平行移動の考え方

      transform_rotation_translate01

       


      2. 平行移動

      transform_rotation_translate02

      多角形による表現

      asanoha_elem

      多角形を描画する

      beginShape()

      構文

      beginShape( 種類 )

      説明

      多角形描画は複数の文を記述する必要がある.

      1. はじめにbeginShape();と記述.

        • 引数として後述の図形の種類を記述する.

      2. 必要な頂点の数だけ vertex( X座標, Y座標 ); を記述する.

      3. 最後に endShape(); を記述し,多角形描画を終了する. ※なお、endShape(CLOSE);と記述することで閉じた形状を描画できる.

      Code

      引数

      図形の種類

      例1

      矢印状の図形 複雑な形状は事前に方眼紙等に下書きをし,下図のような計画を立てるとよい.

      draw_arrow_model

      draw_arrow

      Code

      例2

      トライアングルストリップTRIANGLE_STRIPの例 ストリップ(strip )は「細長い一片」の意味

      beginshape_triangle_strip

      Code

      例3

      トライアングルファンTRIANGLE_FANの例 最初の点を中心に連続した三角形を描画する.

      beginshape_triangle_fan

      Code

      例4

      クアッドストリップQUAD_STRIPの例

      beginshape_quad_strip

      Code

      https://processing.org/reference/beginShape_.html https://processing.org/reference/vertex_.html https://processing.org/reference/endShape_.html

      線のつなぎ目の形状を変更する.

      strokeJoin()

      構文

      strokeJoin( 種類 )

      説明

      引数に応じて線のつなぎ目の形状を変更する.

      引数

      種類

      例1

      MITER(デフォルト)

      strokejoint_mitter

      Code

      例2

      BEVEL

      strokejoint_bevel

      Code

      例3

      ROUND

      strokejoint_round

      Code

      演習6

      麻の葉模様(の一部)を作成する.

      asanoha_elem

      麻の葉模様は三分割された正方形の組み合わせでできている.

      条件

      1. 座標系をスクリーン中心へ平行移動し,トライアングルストリップを1つ描画する. 2つ目の図のように5つの頂点を設定する.

        asanoha_elem_trianglestrip

        asanoha_elem_trianglestrip

      2. 座標系を60°ずつ回転させてトライアングルストリップを6つ描画する.

        asanoha_elem_6trianglestrips

      3. 線の太さや各種色を設定する.

        asanoha_elem_colored

      4. 線のつなぎ目をBEVELにする.

        asanoha_elem

      5. 以下,完成プログラム

      Code

      座標系の保存と復帰

      構文

      座標系を保存する.

      pushMatrix()

      座標系を保存した時点に戻す.

      popMatrix()

      説明

      プログラムの処理の順を追って説明する.

      1. pushMatrix()で座標系を保存しておく.

      2. 座標変換と各種描画の命令

        • translate(), rotate(), scale()

        • 図形描画

      3. popMatrix()で初期の座標系に戻す.

      座標変換を行った後に白の矩形を描画し, 座標系を初期に戻した後に黒の矩形を描画する.

      transform_pushpopMatrix_simple

      Code

      座標系保存のメカニズム

      pushMatrix()popMatrix()は,座標系データをStack形式で出し入れしている.

      Stack(スタック)とは

      したがって,pushMatrix()とpopMatrix()を入れ子構造で使用すると,新しく保存した座標系から古いものへ, という順に取り出される.

      transform_stack

      具体的なプログラム記述

      Queueの仕組みがわかると理解しやすい.

      transform_matrix_nest

      角度と位置を変化させながら楕円を4つ描画する.

      pushpopMatrix_example01

      Code

      https://processing.org/reference/pushMatrix_.html https://processing.org/reference/popMatrix_.html

      演習7

      演習6の麻の葉模様を横に一つ追加し,繋げる.

      asanoha_elem2

      1. 演習6の完成プログラムを開く.

      2. プログラムの最後に平行移動命令文translate( 200, 0 );を記述する.

      3. ステップ2の後ろに,模様描画部分をコピー&ペーストする. しかし,うまく描画されないことを確認する.

        asanoha_elem2_sippai

      4. pushMatrix()popMatrix()を適切な場所に記述する.

        asanoha_elem2_pushpop

      5. ステップ2で記述した部分をtranslate( 200, 0 );200の値を調整し,模様同士を隣接させる.

        asanoha_elem2

      6. 以下,完成プログラム

      Code

      曲線による表現

      曲線を描画する

      curve()

      構文

      curve( 制御点1のX値, 制御点1のY値, 描画点1のX値, 描画点1のY値, 描画点2のX値, 描画点2のY値, 制御点2のX値, 制御点2のY値 )

      curve_spline_clipped

      説明

      4点を結ぶ曲線の中間2点間が描画される.(スプライン曲線)

      引数

      4点とを曲線で囲まれた領域(上の図のプログラム)

      Code

      https://processing.org/reference/curve_.html

      ベジェ曲線を描画する

      bezier()

      構文

      curve()の場合と描画点,制御点の記述順が異なることに注意.

      bezier( 描画点1のX値, 描画点1のY値, 制御点1のX座標, 制御点1のY座標, 制御点2のX値, 制御点2のY値, 描画点2のX座標, 描画点2のY座標)

      bezier_clipped

      説明

      描画点(アンカーポイント)2点と制御点(スムーズポイント)2点から描画される曲線.

      引数

      ハンドルと曲線(上の図のプログラム)

      Code

      https://processing.org/reference/bezier_.html

      演習8

      ベジェ曲線を使って波を作る.

      bezier_wave

      条件

      1. 左半分の曲線を描画する.

        制御点①と②は,波のピークに対して対称の位置にあるのが望ましい. ※制御点やハンドルは描画する必要無し.

        bezier_wave_half_l

      2. 右半分の曲線を描画する. ※制御点やハンドルは描画する必要無し.

        bezier_wave_half_r

      3. 制御点の位置を動かし,波の形を調整する.

      4. 線の太さや色を調整する.

      5. 以下,完成プログラム

      Code

      その他の図形描画命令

      演習は行わないが,今後必要になったら参照すること.

      点を描画する

      point()

      構文

      point( X座標値, Y座標値 )

      説明

      引数

      点を描画する座標のX値, Y値.

      point_4points

      Code

      https://processing.org/reference/point_.html

      矩形を描画する.

      rect()

      構文

      rect( 左上X座標, 左上Y座標, 矩形の幅, 矩形の高さ )

      説明

      矩形(長方形)を描画する.

      引数

      rect_corner

      rect_default

      Code

      矩形の描画方法を指定する.

      rectMode()

      構文

      rectMode( モード )

      説明

      引数

      モード

      例1

      CORNERS

      構文

      rect( 左上X座標, 左上Y座標, 右下X座標, 右下Y座標 )

      rect_corners

      rect_mode_common

      Code

      例2

      CENTER

      構文

      rect( 中心X座標, 中心Y座標, 矩形の幅, 矩形の高さ )

      rect_center

      rect_mode_common

      Code

      例3

      RADIUS

      構文

      rect( 中心X座標, 中心Y座標, 矩形の幅の半分, 矩形の高さの半分 )

      rect_radius

      rect_mode_common

      Code

      https://processing.org/reference/rectMode_.html

      楕円の描画方法を指定する.

      ellipseMode()

      構文

      ellipseMode( モード )

      説明

      引数

      モード

      例1

      RADIUS

      構文

      ellipse( 中心X座標, 中心Y座標, 楕円の幅の半分, 楕円の高さの半分 )

      ellipsemode_radius

      ellipse_mode_common

      Code

      例2

      CORNER

      構文

      ellipse( 左上X座標, 左上Y座標, 楕円の幅, 楕円の高さ )

      ellipse_corner

      ellipse_mode_common

      Code

      例3

      CORNERS

      構文

      rect( 左上X座標, 左上Y座標, 右下X座標, 右下Y座標 )

      ellipse_corners

      ellipse_mode_common

      Code

      https://processing.org/reference/ellipseMode_.html

      三角形を描画する.

      triangle()

      構文

      triangle( 頂点1X座標, 頂点1Y座標, 頂点2X座標, 頂点2Y座標, 頂点3X座標, 頂点3Y座標 )

      説明

      三角形を描画する.

      引数

      描画する三角形の3つの頂点の座標

      shape_triangle

      Code

      https://processing.org/reference/triangle_.html

      四角形を描画する.

      quad()

      構文

      quad( 頂点1X座標, 頂点1Y座標, 頂点2X座標, 頂点2Y座標, 頂点3X座標, 頂点3Y座標, 頂点4X座標, 頂点43Y座標 )

      説明

      四角形を描画する. 矩形と違い,線と線の間の角度が90°に固定されていない.

      引数

      描画する四角形の4つの頂点の座標

      quad_example

      Code

      演習EX

      本日まで学んだ命令を自由に使い,自由に画像を生成してみる.

      第3回:演算と変数

      引数に式を書く.

      params_suushiki

      Code

      引数は式を書くこともできる.

      式がコンピュータにより計算され,答の値が引数になる.

      式とは

      算術式とは

      演算子

      プログラムの式に用いる演算を行うための記号を演算子という.

      算術演算子

      算数(演算記号)プログラム(演算子)記号の読み方日本語キーボードにおけるキーの場所の対応
      ++プラスShift + 「れ」
      -ハイフン「ほ」
      ×*アスタリスクShift + 「け」
      ÷/スラッシュ「め」

      式と演算子

      式と演算子の関係をイメージで理解しておく.

      math_operater

      演習1

      引数に数式を記述し,4つの円を上下左右に表示する.

      1. 以下のプログラムをコピーする.

        params_suushiki_circle

        Code
      2. 以下の円の描画命令を追加する.

        circle( 100 + 50, 100, 40 );

        params_suushiki_circle2

      3. ステップ2のように,最初の円の座標値100に加算/減算する数式を記述し,円の描画命令を追加していく. 以下のような表示が行われれば完成.

        params_suushiki_circle5

      4. 以下完成プログラム

        Code

      このような式への置き換えは意味がない気がするが,変数を用いる場合に有効になる.

      変数を使う.

      演習1のプログラムを変数で置き換えたプログラム.

      params_suushiki_circle5

      Code

      変数の値を変えることで,簡単に図形の描画を変化させることができる.

      params_suushiki_circle5_zure

      Code

      変数とは

      変数を定義する.

      変数を作ることを変数を定義するという.

      構文

      int 変数名 = 数値;

      float 変数名 = 数値;

      説明

      int_koubun

      int
      float

      変数を使う.

      例1

      int型の変数を作る例. 図形のXY座標値を変数に保存している.

      var_circle

      Code

      例2

      例1を元に,float型の変数を作る例. HSBで用いる色情報を変数に保存している.

      var_circle_col

      Code

      例3

      演習1のプログラムに変数を加えたもの.

      params_suushiki_circle5_zure

       

      Code

      例4

      例3にfloat型の変数を追加し,変数を使って色の指定を行う例. 彩度と輝度は共通にするため,変数を用いている.

      var_int_float_circle5

      Code

      演習2

      例4のプログラムに円の大きさ用の変数を一つ追加し,命令文の数値を変数に置き換える.

      1. 例2のプログラムをコピーする.

      2. 円の大きさ用のint型の変数を1つ作成する.

      3. 描画命令の引数部分を変数に置き換える.

      4. 追加した変数の初期値を変更すると全ての円の大きさが変わることを確認する.

        var_int_float_circle5_size

      5. 以下,完成プログラム

        Code

      変数の値を操作する.

      変数の値は後から変更することができる.

      var_add_squares

      Code

      変数に値を足す(加算)

      構文

      変数名 += 値;

      説明

      https://processing.org/reference/addassign.html

      例1

      X座標値の変数に値を足しながら正方形を横に並べる.

      var_add_squares

      Code

      変数から値を引く(減算)

      構文

      変数名 -= 値;

      説明

      https://processing.org/reference/subtractassign.html

      変数に値をかける(乗算)

      構文

      変数名 *= 値;

      説明

      https://processing.org/reference/multiplyassign.html

      例2

      例1のプログラムに,正方形の大きさの値の変数に0.9をかける記述を追加した例.

      var_mult_squares

      Code

      変数を値でわる(除算)

      構文

      変数名 /= 値;

      説明

      https://processing.org/reference/divideassign.html

      変数へ値を上書きする.

      構文

      変数名 = 値;

      説明

      代入演算子

      四則計算演算代入演算子
      足し算加算+=
      引き算減算-=
      かけ算乗算*=
      割り算除算/=

      エディタ:検索と置換

      プログラムの同じ個所を同時に書き換えたい場合,文字列の置換を行うとよい.

      1. エディタ内の書き換えたい文字列を選択する.

      2. Ctrl キーを押しながら Fキー を押す.

      3. 「置換」欄に書き換えたい(新しい)文字列を入力する.

      4. 「すべて置換」をクリックする.

      mojiretsu_chikan

      演習3

      例2のプログラムに代入演算子を使った文を複数追加し,下図のような表示が行われるプログラムを作る.

      var_squares_addy

      1. 例2のプログラムをコピーする.

      2. スクリーンサイズを400×200へ変更する.

      3. いずれかの変数と代入演算子を使った文を複数追加し,上図のように表示されるプログラムを作成する.

      4. 以下,完成プログラム.

        Code

      剰余算を使った表現

      ストライプやボーダーなどの縞模様の表現に用いることが多い

      var_squares_jouyo

      Code

      剰余算

      演算子

      算数(演算記号)プログラム(演算子)記号の読み方日本語キーボードにおけるキーの場所の対応
      ÷%パーセントShift +「え」

      例1

      正方形の座標値Xの値を200で割った余りを塗色に設定した例

      var_squares_jouyo

       

      Code

      例2

      環状に並んだ円の角度を180で割った余りを塗色に設定した例

      var_circles_jouyo

      Code

      演習4

      例1のプログラムの変数iRepeatの初期値を書き換え,様々な模様のパターンを表示する. 余裕があればfill()を書き換え,RGB値を指定してみる.

      var_squares_jouyo_01

      var_squares_jouyo_02

      var_squares_jouyo_03

      複雑な計算式

      四則混合

      (1+2)3×4÷5

      算術演算子の優先順位

      優先度種類演算子
      高い括弧(カッコ)( )
       乗算*
       除算/
       剰余算%
       加算+
      減算-

      演習5

      白黒ストライプを作る.

      var_squares_shirokuro

      1. 以下のプログラムをコピーする.

        var_squares_shirrogray

        Code
      2. fill( iX % iRepeat )の中の引数を書き換え,白黒ストライプが描画されるようにする.

        カッコや他の算術演算子を加え,四則混合の式にする必要がある.

        var_squares_shirokuro

      3. 以下,完成プログラム

        Code

      三角関数を用いた表現

      三角関数

      sin()

      cos()

      tan()

      構文

      sin( 角度のラジアン値 ) cos( 角度のラジアン値 ) tan( 角度のラジアン値 )

      角度をラジアンへ変換する命令を含めると以下のようになる

      sin( radians( 角度のラジアン値 ) ) cos( radians( 角度のラジアン値 ) tan( radians( 角度のラジアン値 )

      説明

      角度と計算結果の値の関係

      関数名構文返す値の範囲角度と返す値の関係
      正弦関数sin( α )-1~1の間calv_var_sin_graph
      余弦関数cos( α )-1~1の間calv_var_cos_graph
      正接関数tan( α )-∞~-∞ 90°等,値が定義できない場合がある.calv_var_tan_graph

      https://processing.org/reference/sin_.html https://processing.org/reference/cos_.html https://processing.org/reference/tan_.html

      例1

      並んだ正方形のY座標値にsin()を使った例

      var_squares_sin

      Code

      例2

      並んだ正方形の塗色にcos()を使った例

      var_squares_col_cos

      Code

      演習6

      例1を元に,塗色に三角関数に使い白黒のグラデーションをつける.

      var_squares_sin_fill_gyaku

      1. 以下のプログラムをコピーする.

        var_squares_sin

        Code
      2. iYiCenterYで置換する.

        var_squares_sin_chikan_cent

      3. 新しくY座標値用変数を作る.

        float fY = 0;

      4. 正方形描画命令の2つ目の引数を切り取り,変数fYに代入する.

        fY = iCenterY * sin( radians( iX ) ) + iOffsetY;

        この代入文は正方形描画命令の前の行に記述する.

      5. ステップ4で切り取った部分には変数fYを記述する.

        以下,ここまででできたプログラム

        Code
      6. 他の正方形描画命令の2つ目の引数をfYで置換する.

        「次を探す」・「置換&検索」を使って1つずつ置換する.

        var_squares_sin_chikan_fy

      7. ステップ4の文を他の正方形描画命令の前行にも記述する.

        以下,ここまででできたプログラム

        Code
      8. ステップ7までで,引数の中に記述していた式の値を変数fYに保存するように変更を行った.

      9. 全ての正方形描画命令の前にfill( fY );を追加してみる.

        var_squares_sin_fill

      10. fill( fY );の引数が大きくなるよう式を組む.

        変数fYは0~50の間の値なので,このままだと暗い.

        var_squares_sin_fill_5bai

      11. スクリーン上のほうが正方形が白くなる方法を考えてみる.

        var_squares_sin_fill_gyaku

      12. 以下,完成プログラム

        Code

      乱数を用いた表現

      乱数を得る

      random()

      構文

      random( 最大値 )

      random( 最小値, 最大値 )

      説明

      引数

      返り値

      ランダムなfloat

      https://processing.org/reference/random_.html

      例1

      正方形の並びのY座標値をランダムな値にする.

      var_squares_randomy

      Code

      例2

      並んだ正方形の塗色をランダムなグレー値にする.

      var_squares_randomcol

      Code

      演習7

      色のブレがあるストライプ柄を作る.

      var_squares_randomcol_bure

      条件

      べき乗の計算を行う命令

      pow()

      構文

      pow( 基数, 指数 )

      説明

      35=3×3×3×3×3

      引数

      基数,指数

      返り値

      べき乗の計算結果のfloat型の値

      例1

      正方形のY座標値をべき乗の計算で大きくしていく例 変数iXを指数としている.

      var_squares_pow_y

      Code

      例2

      正方形の塗色をべき乗の計算で明るくしていく例 変数iXを指数としている.

      var_squares_pow_col

      Code

      https://processing.org/reference/pow_.html

      演習8

      1. 例2のプログラムをコピーする

      2. 基数を値として保存する変数fNの初期値を増やして実行してみる.

      3. 正方形の色が急激に明るくなることを確認する.

        var_squares_pow_col_zouka

      その他の数学関連の命令

      平方根の計算を行う命令

      sqrt()

      構文

      sqrt( 平方根を求める数値 )

      説明

      sqrt_graph

      引数

      平方根を求める数値

      例1

      正方形のY座標値にsqrt()を使用した例

      var_squares_sqrt_y

      Code

      https://processing.org/reference/sqrt_.html

      例2

      正方形の塗色にsqrt()を使用した例

      var_squares_sqrt_col

      Code

      絶対値を求める

      abs()

      構文

      abs( 絶対値を求める数値 )

      説明

      引数

      絶対値を求める数値

      Code

      https://processing.org/reference/abs_.html https://processing.org/reference/ceil_.html https://processing.org/reference/floor_.html https://processing.org/reference/round_.html

      型の変換

      小数点以下を切り上げる.

      ceil()

      構文

      ceil( 数値 )

      例1

      Code

      例2

      float型の値をint型の値に変換するために用いることができる.

      Code

      小数点以下を切り捨てる.

      floor()

      構文

      floor( 数値 )

      例1

      Code

      例2

      float型の値をint型の値に変換するために用いることができる.

      Code

      小数点以下を四捨五入する.

      round()

      構文

      round( 数値 )

      例1

      Code

      float型の値をint型の値に変換するために用いることができる.

      例2

      Code

      int()

      整数型に変換する. 小数点以下は切り捨てられる.

      構文

      int( 変換するfloat型変数や値 )

      Code

      float()

      実数型に変換する.

      構文

      float( 変換するint型変数や値 )

      変換しなかった場合,計算結果の小数点以下が切り捨てられてしまう.

      Code

      変数でなく,数値の場合以下のような書き方もできる

      Code
      Code

      システム変数

      画面のサイズを取得する

      横のピクセル数

      width

      縦のピクセル数

      height

      説明

      transform_origin01

      例1

      スクリーンの角から対角までの線を描画する.

      window_size

      Code

      例2

      size_rect

      Code

      https://processing.org/reference/width.html https://processing.org/reference/height.html

      定数

      final

      構文

      final 変数型 定数名 = 初期値;

      説明

      矩形の大きさの引数に用いた例. 変数と区別しやすくするため,定数名を大文字のみで記述するなど工夫をすることを推奨.

      Code

      https://processing.org/reference/final.html

      第4回:制御文:繰り返し

      for文の基本1

      最初のサンプル

      スクリーン右端まで正方形を並べて描画する.

      var_add_squares

      前回までのプログラム

      Code

      for文を使ったプログラム

      Code

      for文とは

      for_koubun

      条件式とは

      condition_exp

      比較演算子

      構文

      条件式比較演算子真(true)を返す条件
      a < b<aがbより小さい
      a <= b<=aがb以下
      a > b>aがbより大きい
      a >= b>=aがbと等しいか大きい
      a == b==aとbが等しい
      a != b!=aがbが等しくない

      for文の繰り返し実行順序

      for_flow_true

      for文の変数を文に記述する.

      繰り返しを図形にも反映させるため,for文の変数は繰り返す文の中にも記述する.

      for_variable_incommand

      https://processing.org/reference/for.html

      例1

      スクリーン右端まで幅50の矩形を並べて描画する.

      参考:矩形を描画する.

      for_rects8

      Code

      例2

      スクリーン右端まで幅20の矩形を並べて描画する.

      for_rects20

      Code

      例3

      スクリーン下端まで矩形を並べて描画する. 変数名をiYに変更している.

      for_rects8_column

      Code

      例4

      ストライプ状に縦線を描画する.

      for_lines

      Code

      演習1

      「大きさ40の正方形を右端まで並べるプログラム」をfor文を使ったプログラムに書き換える.

      for_squares10

      1. 下のプログラムをコピーする.

        for文を使わないプログラム

        Code
      2. プログラムをfor文を使ったものに書き換える.

        最終的には,元プログラム3行目のint iX = 0;は削除しなければエラーになる.

      3. 以下,完成プログラム

        Code

      for文の基本2

      二重(定義)エラー

      for文の変数と同じ名前の変数を前に記述するとエラーとなる.

      duplicate_variable_error

      ブロック

      ブロック構造

      for_block_indent

      自動フォーマット機能

      Processingにはボタンを1度押すだけでプログラムを自動で整形する機能がある.

      編集 > 自動フォーマット ショートカットキー:Ctrl + T

      auto_format

      auto_format_code

      大きい円→小さい円と描画するため, for文の変数の値を400→10へ20ずつ減らしていく例

      for_circles_rev

      Code

      演習2

      「剰余算を使った白黒ストライプのプログラム」をfor文を使ったプログラムに書き換える.

      var_squares_shirokuro

      1. 下のプログラムをコピーする.

        for文を使わないプログラム

        Code
      2. プログラムをfor文を使ったものに書き換える.

        最終的には,元プログラム3行目のint iX = 0;は削除しなければエラーになる.

      3. 以下,完成プログラム

        Code

      決められた回数繰り返すfor文による表現

      繰り返す回数を指定するfor文

      これまでの正方形を並べるfor文は,「8回繰り返す」というfor文に書き変えることもできる.

      下のプログラムのようになる.

      var_add_squares

       

      Code

      繰り返す回数

      条件式の右辺に記述する.

      for_no_kaisuu

      更新で1ずつ増やす.

      for_no_1add

      インクリメント演算子

      ++

      構文

      前置

      ++変数

      後置

      変数++

      説明

      https://processing.org/reference/increment.html

      デクリメント演算子

      --

      構文

      前置

      --変数

      後置

      変数--

      説明

      https://processing.org/reference/decrement.html

      例1

      20個の円をランダムな位置に描画する.

      for_no_random_circles

      Code

      例2

      200個のランダムな正方形を減算で描画する.

      for_squares_sub

      Code

      例3

      20本のランダムな線を除外で描画する.

      for_lines_exc

      Code

      演習3

      任意のブレンドモードを指定し,100個以上の任意の図形をランダムに描画するプログラムを自由に作成する.

      参考:ブレンドモードによる表現

      下のサンプルをベースに進めてもよい.

      サンプル

      ブレンドモード:ブレンド(デフォルト)で100個の正円を描画する.

      for_no_100circles_plain

      Code

      作例

      ブレンドモード:差の絶対値で100個のランダムな正円を描画する.

      for_no_100circles_blend

      Code

      for文と座標変換を使った表現

      特にpushMatrix()popMatrix()を使う場合は慣れが必要となる.

      例1

      座標変換を使用して正方形を8つ並べる.

      var_add_squares

      Code

      例2

      円周上に正方形を12個並べる.

      参考:矩形の描画方法を指定する.

      for_squares_enshuu

      Code

      例3

      回転させた正方形を水平に並べる.

      座標系の保存を使用する必要があるため難易度が上がる.

      for_squares_rot

      Code

      例4

      5枚の花弁をもつ花の模様

      5petals_flower

      Code

      例5

      256個の正円を使った螺旋状の表現

      for_rasen

      Code

      演習4

      下のサンプルを元に,回転対称の表現を自由に記述する.

      長方形を60°ずつ回転させながら描画した回転対称の表現

      for_rects_rot

      Code

      以下作例

      for_rects_rot_diff

      Code

      変数を多用した多角形の表現

      乱数の値を保存する変数を使った連続した線の描画

      for_var_lines

      Code

      for文のブロック外で定義した変数.

      変数が使える範囲を変数のスコープという.

      var_scope

      for文の初期化で定義した変数.

      for_countvar_scope

      for文のブロック内で定義した変数.

      for_var_scope

      例1

      五角形を描画する.

      多角形描画vertex()は座標変換を使えないため,sin()cos()を用いて頂点の計算を行う. 数学的に理解する必要は無いのでテンプレートとして使えればよい.

      for_var_5quad

      Code

      例2

      六角形を描画する.

      例1の数値を一部変更するだけでできる.

      for_var_6quad

      Code

      例3

      凹凸のある多角形の描画

      for_var_uni

      Code

      演習5

      例3のプログラムを元に,下図のような星型の描画のプログラムを作る.

      一部の数値を変更するだけでできる.

      for_var_star

      以下,完成プログラム

      Code

      for文のネストを使った表現

      正方形をスクリーン全体に並べて描画する.

      for_nest_grid

      Code

      for文のネスト入れ子構造

      for文の中にさらにfor文を記述することを,for文のネストという.

      for文のネストの実行順序

      for_nest_grid

      for文の変数を文に記述する.

      ネストの分変数が増えるので,繰り返す文の中に2つの変数を記述できる.

      for_nest_variables

      例1

      大きさ40の正方形をスクリーン全体に並べて描画する.

      for_nest_squares

      Code

      例2

      例1を元に変数iXの値を彩度,変数iYの値を輝度に使用した例.

      for_nest_squares_hsb

      Code

      例3

      例2を元に点(ドット)を描画する例.

      for_nest_points_hsb

      Code

      例4

      正方形と正円を重ねて並べて描画する.

      参考:楕円の描画方法を指定する.

      for_nest_square_circle

      Code

      例5

      正方形を回転させながら並べて描画する.

      for_nest_square_rotate

      Code

      例6

      ランダムな楕円を20個重ね,X軸方向へ10個描画する.

      for_nest_elps_x

      Code

      例7

      ランダムな位置に30個の花を描画する.

      for_nest_flower

      Code

      演習6

      任意の例のサンプルプログラムをベースに自由に変更を加える.

      例5をベースにした作例

      for_nest_square_circle_ex

      Code

      多重ネストを使った表現

      例1

      ランダムに重ねた8個の正方形をスクリーンに並べる.

      for_nests_square

      Code

      例2

      ランダムに回転して重ねた(差の絶対値)6個の正方形をスクリーンに並べる.

      for_nests_squres_rot

      Code

      例3

      60°ずつ回転して重ねた(乗算)6個の楕円をスクリーンに並べる.

      for_nests_ellipses_rot

      Code

      演習7

      以下の多重ネストのプログラムを自由に編集し,多重ネストにより複雑な描画結果が出力されることを確認する.

      120°ずつ回転して重ねた3個の長方形をスクリーンに並べる.

      for_nests_rect

      Code

      作例

      for_nests_sasa

      Code

      その他のサンプル

      反復

      repeat

      Code

      振動

      for_wave

      Code

      遷移

      transition

      Code

      乱雑さ

      random

      Code

      モアレ

      moire

      Code

      回転対称

      ひし型の回転対称

      synmetry_rot

      Code

      並進対称

      synmetry_trl

      Code

      第5回:制御文:条件分岐

      条件分岐を本格的に用いるのはアニメーションからだが,静止画像の表現に用いることもできる.

      if文の基本

      最初のサンプル

      X座標値が0, 100, 200, 300の時に塗色をランダムなグレー値へ切り替える.

      条件式iX % 100 == 0は「変数iXの値を100で割ったときの余りが0」の時に真(true)を返す.

      if_squares_random_gray

      Code

      if文のフロー

      if_flow_square

      構文

      if_koubun

      ブロック

      if_koubun_block

      例1

      X座標値が0, 100, 200, 300の時に正円を追加で描画する.

      if_squares_and_circles

      Code

      例2

      Y座標値が0, 100, 200, 300の時に正円を追加で描画する.

      if_add_circle_y

      Code

      https://processing.org/reference/if.html

      演習1

      if_squares_circles_20

      上図の描画を行うプログラムを作成する. X座標値:60ピクセル毎に正円を追加して描画する.

      以下のプログラムを元にif文を用いて作成する.

      if_squares20

      Code

      以下,完成プログラム

      Code

      if-else文の基本

      X座標値が0, 100, 200, 300の時に塗色をグリーンに,それ以外の時にブルーへ切り替える.

      if_else_squares_gb

      Code

      if-else文のフロー

      if_else_flow

      構文

      if_else_koubun

      処理の流れ

      if文においては,いずれか1つのブロック文のみを実行し,その後ブロック文の次の文へ処理が移行する. (2つ以上のブロックを実行することはない.)

      条件式の結果が真(true)の場合

      flow_if_else_flow_true

      条件式の結果が偽(false)の場合

      flow_if_else_flow_false

      例1

      X座標値が0, 100, 200, 300の時に正円を,それ以外の時に正方形を描画する.

      if_else_squares_circles

      Code

      例2

      Y座標値が0, 100, 200, 300の時に正円を,それ以外の時に正方形を描画する.

      if_else_add_circle_y

      Code

      https://processing.org/reference/else.html

      演習2

      if_else_squares_circles20

      上図の描画を行うプログラムを作成する. X座標値:200ピクセル毎に(正方形ではなく)正円を描画する.

      以下のプログラムを元にif-else文を用いて作成する.

       

      if_squares20

      Code

      以下,完成プログラム

      Code

      乱数を使った条件式による表現

      確率で分岐する条件文

      下のプログラムのように,条件式に乱数を用いることで確率で分岐する表現を行える.

      0~100値の間のランダム

      Code

      0.0~1.0値の間のランダム

      Code

      例1

      50%の確率で白黒を塗分ける例

      if_random_squares_bw

      Code

      例2

      50%の確率で正方形と正円を描き分ける例

      if_random_squares_circles

      Code

      剰余算を使った条件式による表現

      剰余算を使った条件式は既出だが,改めて整理する.

      二回に一度分岐する条件文

      下のプログラムのように,条件式に剰余算を用いることで交互に分岐する表現が行える.

      変数iが0~99まで1ずつ増えるfor文

      Code

      例1

      奇数・偶数列によって白黒を塗分ける.

      if_else_squares_kiguu

      Code

      数回に一度分岐する条件文

      変数iが0~99まで1ずつ増えるfor文

      Code

      例2

      3回に一度白で塗る.

      if_else_squares_1by3

      Code

      演習3

      if_else_squares_circles_wb

      上図の描画を行うプログラムを作成する.

      以下のプログラム(例3と同じ)を元にif-else文を追記し,作成する.

      if_else_squares_kiguu

      Code

      以下,完成プログラム

      Code

      行をずらす表現

      例1

      以下のテンプレートを元に様々な表現ができる.

      奇数行を半分ずらして正方形を描画する.

      if_else_half_squares

      Code

      例2

      六角形を並べた表現

      if_else_if_hex

      Code

      例3

      六角形を隙間なく並べた表現

      if_else_if_hex_fill

      Code

      例4

      麻の葉模様を敷き詰めた表現.

      if_else_asanoha

      Code

      例5

      青海波(せいがいは)模様の表現

      if_else_seigaiha

      Code

      例6

      市松模様の表現

      if_else_ichimatsu

      Code

      演習4

      以下のプログラム(例1)を元に自由に画像を作成する.

      奇数行を半分ずらして正方形を描画する.

      if_else_half_squares

      Code

      以下,作例

      if_else_half_6squares

      Code

      else ifの基本

      if_else_if_squares_circles_triangles

      Code

      else ifのフロー

      if_else_if_flow

      構文

      if_else_if_koubun

      例1

      塗色に3色のグレー値をランダムに使用する.

      if_else_if_squares_bwg

      Code

      例2

      正方形を三分の一ずつずらして並べる.

      if_else_if_squares

      Code

      例3

      3種類の図形と3種類のグレー値を用いる.

      if_else_if_tcspng

      Code

      例4

      3色のグレー値を使った花の表現

      if_else_if_flower

      Code

      演習5

      演習5で作成したプログラムにelse if{}を追加し,自由にアレンジする.

      以下,作例

      if_else_if_6squares

      Code

      switch文

      構文

      Code

      処理の流れ

      1. 変数or式の返す値と等しいラベルを検索

        flow_switch_flow_01

      2. 該当するラベルの位置に記述されている処理を,break;の文の位置まで実行する. 下図の例では,青枠で囲まれた命令文のいずれか一つが実行される.

        flow_switch_flow_02

      3. いずれかのラベル位置の処理が終了したら,ブロック文の次の文へ処理を移行する.

        flow_switch_flow_03

      4色が交互に出現するストライプの描画.

      Code

      switch_sample

      https://processing.org/reference/switch.html

      論理演算式による表現

      論理演算(ブーリアン演算)

      論理演算子

      条件式演算子条件ベン図演算
      条件式A && 条件式B&&条件式Aが真,かつ条件式Bが真flow_boolean_and論理積 AND
      条件式A || 条件式B||条件式Aが真,もしくは条件式Bが真flow_boolean_or論理和 OR
      ! 条件式!条件式が偽flow_boolean_not否定 NOT

      https://processing.org/reference/logicalAND.html https://processing.org/reference/logicalNOT.html https://processing.org/reference/logicalOR.html

      例1

      論理演算を使った市松模様の描画

      logic_ope_ichimatsu

      Code

      第5回:配列

      配列の基本1

      任意のRGB値を配列に格納したプログラム

      array_rgb

      Code

      配列( Array )とは

      変数を複数連結したもの.

      配列のハードウェア的イメージ

      concept01

      配列の構成

      array_memory_irgb

      配列を作る.

      構文

      値の数は自由に設定することができる.

      要素のデータ型[] 配列名 = { 値0, 値1, 値2, 値3, , , , 値n };

      例1

      int型(整数型)の名前がiXの配列の宣言・初期化

      Code
      確保されるメモリのイメージ

      array_X0_10

      例2

      float型(実数型)の名前がfRGBAの配列の宣言・初期化

      Code
      確保されるメモリのイメージ

      array_fRGBA

      要素の値を取得する

      ある配列の要素の値を取得するには,下のような記述を行う.

      配列名[ 要素番号 ]

      例1

      要素番号:2の値を矩形のX座標値に使用する.

      array_ix_rect

      Code

      メモリ上のイメージ

      array_shokika_iX0_10

      例2

      配列のそれぞれの要素をRGBA値として使用する.

      array_rgba_rect

      Code

      メモリ上のイメージ

      array_shokika_fRGBA

      https://processing.org/reference/Array.html

      演習1

      array_ellipse_prop

      下のプログラムは楕円を描画するための情報を配列に格納し,描画に用いている. 3行目の配列に格納する情報を書き換え,上図のように楕円が描画されるように正しく書き換える.

      array_ellipse_origin

      Code

      配列の基本2

      要素へ値を代入する

      変数と同じく,配列の要素も値を代入することができる.

      配列名[ 要素番号 ] = 値;

      要素数の取得

      配列名.length

      なぜ必要なのか

      要素数の変更に柔軟に対応できるため.

      例えば,以下の配列の場合

      int[] iR = { 10, 20, 30 };

      これを次のように書き換えると

      int[] iR = { 10, 20, 30, 40, 50 };

      要素数が増えるが,配列名.lengthは自動的に更新される.

      https://processing.org/reference/arrayaccess.html

      ランダムに配列の要素を使用する.

      6種類のX座標値をランダムに用いる正円の描画

      array_random_circlex

      Code

      要素番号をランダムに決定する.

      ある配列の要素番号をランダムに取得する場合,以下のように記述するとよい.

      floor( random( 配列名.length ) )

      通常は上記の式を変数に代入し,その変数を用いて要素の値を取得するとよい.

      int iElem = floor( random( iCircleX.length ) ); circle( iCircleX[ iElem ], random(200), 10 );

      参考:小数点以下を切り捨てる.

      例1

      4種類の大きさからランダムに用いる正円の描画

      array_4patterns_circles

      Code

      例2

      6種類のX座標値をランダムに用い,さらに4種類の色情報(Gray値)のランダムな塗分け行う描画

      array_4patterns_grays

      Code

      演習2

      下のプログラムは完全にランダムな色の正方形を描画している. このプログラムを,3つの配列の値を色情報として使用して描画が行われるように完成させる.

      array_mozaic_random

      Code

      以下,作例

      array_mozaic_sakurei

      2次元配列の基本

      4種類のRGBの組み合わせからランダムに選択した塗色の正円を描画する.

      array_2d_random_circle_rgb

      Code

      2次元配列とは

      2次元配列を作る.

      構文

      array_2d_koubun

      2次元配列の値を取得する.

      2次元配列は,配列名と2つの要素番号を使って指定のデータにアクセスする.

      array_2d_taiou

      2次元配列における要素数の取得

      構文

      1次元目(iRGB[○][])の要素数の取得

      配列名.length

      2次元目(iRGB[][○])の要素数の取得

      配列名[0].length

      0の部分は正しい要素番号であれば何でもよい.

      array_2d_length

      2次元配列による表現

      頂点XY座標値

      各行が頂点それぞれの座標値を表す.

      Code

      array_two_xy_concept

      2次元配列を使った多角形の描画.

      array_two_5vertexes

      Code

      描画結果と頂点の対応は下図のようになる.

      array_two_5vertexes_concept

      RGB情報の記述

      Code

      array_colors_rgb_concept

      RGB配列を使った様々な図形の描画.

      array_colors_primitives

      Code

      HSB情報の記述

      Code

      array_colors_hsb_concept

      HSB配列を使った格子形状の描画.

      array_colors_hsb

      Code

      演習3

      以下のサンプルに頂点情報(配列の要素)を追加し,より豊かな多角形表現を行ってみましょう.

      2次元配列を使った多角形による回転対称の表現

      array_2d_rotate_vertexes

      Code

      以下,作例

      array_2d_rotate_vertexes_sakurei

      Code

      配列を初期値を入力せずに作る.

      配列に初期値を代入せずに作成することもできる. その場合,宣言文を記述することになる.

      宣言文

      構文

      要素のデータ型[] 配列名 = new 要素のデータ型[要素数];

      例1

      int型(整数型)の要素を10個持つ,名前がiXの配列の宣言文

      Code

      例2

      float型(実数型)の要素を4個持つ,名前がfRGBAの配列の宣言文

      Code

      初期化

      Code

      例1

      int型(整数型)の要素を10個持つ,名前がiXの配列の宣言・初期化

      Code

      例2

      float型(実数型)の要素を4個持つ,名前がfRGBAの配列の宣言・初期化

      Code

      for文を使った初期化

      for文を使った基本的な初期化

      Code

      例1

      全ての要素を0で初期化する.

      Code

      例2

      全ての要素を要素番号×5で初期化する.

      Code

      2次元配列を初期値を入力せずに作る.

      宣言文

      構文

      要素のデータ型[][] 配列名 = new 要素のデータ型[要素数][要素数];

      例1

      int型の行数4, 列数2の2次元配列iXYを宣言する.

      Code

      array_2d_xy

      例2

      float型の行数6, 列数3の2次元配列fRGBAを宣言する.

      Code

      array_frgba

      for文を使った初期化

      for文のネスト使った初期化

      行はロウ( Row ),列はカラム(Column)という. 繰り返し変数名はそれらに準じている.

      Code

      例1

      int型の行数3,列数4である2次元配列iAを宣言し,全ての要素を0で初期化する例. ネストを用いる.

      Code

      例2

      100個の正円の色情報を配列に格納し,描画に用いた例. ネストを用いない.

      array_2d_100circles_color

      Code

      例3

      100個の正円の描画情報を配列に格納し,描画に用いた例. ネストを用いない.

      array_2d_100circles

      Code

      参考: ルール90セル・オートマトン

      初期状態

      cell_automaton01_01

      隣接するセルの合計が次の(行の)値になる.

      このルールをさらに次の行へと進めていく.

      cell_automaton01_02

      奇数のセルを描画する.

      プログラム中では奇数を1,偶数を0として配列に格納している.

      cell_automaton01_03

      制作手順

      今回制作するプログラムでは,セル=ピクセルと考える.

      1. 二次元配列の宣言,初期化 格子状のセルを表す配列を用意する.

        Code
      2. 初期状態の入力

        • 最初の行の中心のセルを1,それ以外は0

        • 初期状態の唯一のセルを描画

        ※以上の処理をステップ1のプログラムの後に追加する.

        cell_automaton01_01

        Code
      3. 隣接するセルの合計が次の(行の)値になる.

        • for文のネストによる繰り返し

        ※以上の処理をステップ2のプログラムの後に追加する.

        cell_automaton01_02

        Code
      4. スクリーン両端の処理 ステップ3のままだとiX-1の値がマイナスになったり,iX+1の値が配列の要素番号の最大を超えてしまう. ※ステップ3までのプログラムを書き換えると以下のようになる.

      完成したプログラム

      cell_automaton01_04

      Code

      初期状態(一行目のセルの状態)を変える

      巻貝の表面模様のような画像が生成される. この例では最初の行のセルの値が0か1かを全てランダムに決定している.

      cell_automaton01_05

      Code

      第6回:アニメーション

      Processingにおけるアニメーション

      ランダムな位置に正円を描画するアニメーション

      animation_random_circles

      Code

      Activeモード

      アニメーションを行う場合,Activeモードでプログラムを記述する必要がある. 全体のプログラムを二つのブロックに分けて記述する.

      Staticモード

      https://processing.org/reference/setup_.html https://processing.org/reference/draw_.html

      動画のフレームとは

      フレームレートとは

      フレームレートの設定

      frameRate()

      1秒間にdraw(){}が実行される回数を指定できる. 特に指定をしない場合,デフォルトは60となる.

      構文

      frameRate( fps )

      https://processing.org/reference/frameRate_.html

      引数

      1秒間に描画するフレーム数

      例1

      ランダムな位置に正円を描画するアニメーション

      animation_random_circles_fr8

      Code

      例2

      ランダムな大きさ,色の正円を描画するアニメーション

      anim_random_size_col_circle

      Code

      例3

      横一列にランダムな色の正方形を並べて描画するアニメーション

      参考:小数点以下を切り捨てる.

      animation_random_squares

      Code

      例4

      縦横にランダムな色の正方形を並べて描画するアニメーション

      animation_random_squares_2d

      Code

      演習1

      まずはActiveモードの挙動を体験する.

      以下のプログラムを元に,2つの図形描画命令を使ったランダムなアニメーションを自由に作成する.

      anim_randam_circles2

      Code

      以下,作例

      anim_random_circles_sky

      Code

      画面のリフレッシュによる表現

      ランダムな位置に1つの正円を描画するアニメーション

      animation_random_circles_ref

      Code

      画面のリフレッシュ

      animation_random_circles_ref

      例1

      同X軸上にランダムな色の正方形を1つ描画するアニメーション

      animation_random_squares_ref

      Code

      例2

      ランダムな大きさ,色の正円を1つ描画するアニメーション

      anim_random_size_col_circle_one

      Code

      アルファ値を使った画面リフレッシュ

      background()の代わりに半透明の矩形を用いて画面をリフレッシュすることで,少しずつ古い図形が消えていくような表現が実現できる.

      参考:画面サイズを取得する.

      Code

      例1

      同X軸上にランダムな色の正方形を1つ描画し,フェードアウトするアニメーション

      anim_squares_fade

      Code

      例2

      終端がランダムな線を描画し,フェードアウトするアニメーション

      anim_random_lines_sparks

      Code

      例3

      縦横にランダムな色の正方形を並べて描画し,フェードアウトするアニメーション

      anim_random_squares_fade

      Code

      演習2

      演習1に「アルファ値を用いた画面のリフレッシュ」を追加した以下のプログラムを元に,自由にアレンジを加える.

      anim_random_circles_fade

      Code

      以下,作例

      anim_random_ellipses_suiteki

      Code

      変数によるアニメーション表現

      animation_var_square_loop

      Code

      グローバル変数

      animation_var_kihon

      例1

      フレーム毎に正方形の数を増やしながら並べて描画

      anim_var_squares

      Code

      例2

      正方形のグレイ値を1ずつ増やすアニメーション

      anim_square_gray

      Code

      例3

      円弧の終わりの角度を1度ずつ増やすアニメーション

      anim_arc_pie

      Code

      例4

      楕円の幅を1ずつ減らすアニメーション

      anim_ellipse_width

      Code

      演習3

      任意の図形を一つ描画し,グローバル変数を使ってループアニメーションを作る.

      以下,作例

      anim_trianglefan_loop

      Code

      座標変換によるアニメーション表現

      例1

      正円が4度ずつ回転するアニメーション

      anim_circle_rot

      Code

      例2

      線が1度ずつ回転するアニメーション

      anim_line_rot

      Code

      例3

      60個の三角形を描画し,現在のフレームによって色を変えるアニメーション

      参考:三角形を描画する.

      anim_triangle60

      Code

      例4

      星型多角形が1度ずつ回転するアニメーション

      anim_star_rot

      Code

      例5

      12個の正方形を円状に描画するアニメーション

      anim_squares_rot12

      Code

      演習4

      例5のプログラムを元に,図形描画や色の指定などを追加し自由にアレンジする.

      以下,作例

      例5をベースにブレンドモードなどを使用した表現

      anim_12shapes_toryou

      Code

      簡易物理アニメーション

      厳密な物理計算を行う必要はなく,簡単な算術式で表現ができる. フレーム番号をグローバル変数iFrameに保存しておき,時間の値として計算に用いている.

      例1

      自由落下

      anime_freefall_circle

      Code

      例2

      水平投射

      anim_throw_horizon

      Code

      例3

      鉛直投げ上げ

      anim_throw_up

      Code

      例4

      斜方投射

      anime_throw_naname

      Code

      例5

      単振動

      animation_wave_circle

      Code

      例6

      跳ね返り

      anim_circle_hanekaeri

      Code

      シーケンスによる表現

      anim_sequence_simple

      Code

      if文によるシーケンス

      anim_sequence_basic

      例1

      3つの動きを行う円のアニメーション

      ジャンプ用のグローバル変数iJumpDegを追加している.

      anim_sequence_circle

      Code

      例2

      例1に変更を加えたアニメーション

      anim_sequence_circle_jump

      Code

      例3

      連続して弾むようなアニメーション

      anim_sequence_circle_bound

      Code

      例4

      正方形が遅れて動くアニメーション

      anim_sequence_block

      Code

      演習5

      下の基本のシーケンス表現プログラムを自由にアレンジし,仕組みを体験的に理解する.

      anim_sequence_simple

      Code

      時間を考慮したアニメーション表現

      テキスト描画

      text()

      構文

      文字列の描画を行う場合,ダブルクォーテーション""で囲む.

      text( "描画する文字列", X座標値, Y座標値 )

      text( 描画する値, X座標値, Y座標値 )

      text( 変数, X座標値, Y座標値 )

      説明

      スクリーンにテキストを描画する. フォントの色の変更はfill()を使う.

      https://processing.org/reference/text_.html

      テキストの大きさを指定する.

      textSize()

      構文

      textSize( size )

      引数

      フォントサイズ(ピクセル単位)

      説明

      テキスト描画のフォントサイズを設定する.

      https://processing.org/reference/textSize_.html

      text_3way

      Code

      テキストの揃え位置を指定する.

      textAlign()

      構文

      textAlign( alignX )

      textAlign( alignX, alignY )

      説明

      テキスト描画における行揃えの位置を指定する.

      引数

      alignX:左右の揃え位置LEFT, CENTER, or RIGHT

      alignY:TOP, BOTTOM, CENTER, or BASELINE

      text_align

      Code

      時刻を取得する.

      second()

      minute()

      hour()

      構文

      second() // 秒(0 - 59) minute() // 分(0 - 59) hour() // 時(0 - 23)

      説明

      現在の時刻における秒,分,時を取得する. アニメーションに用いる場合,draw(){}の中で使用し,最新の時刻を常に取得する必要がある.

      https://processing.org/reference/second_.html https://processing.org/reference/minute_.html https://processing.org/reference/hour_.html

      例1

      デジタル時計

      anim_time_digital

      Code

      例2

      オーソドックスな時計

      anim_clock

      Code

      例3

      秒毎に正方形が大きくなるアニメーション

      anim_block_second

      Code

      例4

      1秒毎に正円が大きくなり,分が切り替わると正円がしぼむアニメーションを再生する.

      anime_time_sequence_circle_shibomu

      Code

      anim_time_sequence_min_kirikae

      例5

      1秒毎に正円が自由落下し,分が切り替わると正円が広がるアニメーションを再生する.

      anime_time_sequence_freefall

      Code

      演習6

      秒を取得するsecond()を用い,任意のアニメーションを作成する. 余裕があればminute()も使用する.

      課題3のための実験と考えるとよい.

      サンプル集

      配列を使った雨の表現

      anim_amatsubu

      Code

      配列を使った粒子状の表現

      anim_particle

      Code

      親子関係の入れ子アニメーション

      惑星の公転のような回転アニメーション

      anim_wakusei

      Code

      波形の移動(位相変化)アニメーション

      pulse_translate

      Code

      円弧による沈む夕日状の表現

      anim_arc_yuuhi

      Code

      時間帯に応じて背景色を変更する.

      参考:論理演算子

      anim_bg_color_hour

      Code

      内側から多角形を増やして描画する年輪のような表現

      anim_nenrin

      Code

      決まった位置の星が明滅する表現

      anim_fixed_stars

      Code

      第7回:関数の作成

      関数を作成する理由

      1. プログラムを見やすくする.

        特にdraw(){}ブロックが長くなり,混乱することを防ぐ.

      2. 同じような処理を共通化する.

        引数が異なるだけで命令文が重複する箇所などを関数で共通化し,プログラム全体の長さと効率を改善する.

      3. 役割によってプログラムを分け,1つの機能の作成に集中しやすくする.

        特にdraw(){}ブロック内に記述される「図形描画」「アニメーションの更新」など役割でプログラムを分け,それぞれの機能を作成する際に,他の処理を意識しなくてよいようにする.

      描画命令文をまとめる関数

      4つの図形描画を行う関数draw4Primitives()

      func_4primitives

      Code

      関数( function )とは

      関数の呼び出し

      func_call

      関数の定義

      func_define

      関数定義の構文

      Code

      関数定義の記述場所

      関数定義は,setup(){}, draw(){}のブロック外に書く. 通常は,プログラムの後ろに記述することを推奨.

      Code

      例1

      for文で繰り返し正方形描画を行う関数drawSquares()

      func_squares

      Code

      例2

      正方形を円状に描画する drawSquares()

      anim_squares_rot12

      Code

      例3

      雨の描画を行う関数drawRain()

      func_rain_circle

      Code

      演習1

      以下のプログラムをコピーし,描画命令文を分けて関数化する. 関数名はdraw4Primitives()とする.

      func_4primitives

      Code

      アニメーション用変数の更新関数

      4つの図形描画を行う関数draw4Primitives() アニメーション用変数の更新関数:update()

      func_4primitives

      Code

      アニメーション更新用関数

      func_update

      例1

      for文で繰り返し正方形描画を行う関数drawSquares() アニメーション用変数iXの更新を行う関数update()

      func_squares

      Code

      例2

      正円のシーケンスアニメーションを行う関数update()

      anim_sequence_simple

      Code

      例3

      円弧+正円のシーケンスアニメーションを行う関数update() 円弧+正円の描画を行う関数drawBB8()

      func_bb8

      Code

      演習2

      例3のプログラムに回転アニメーション用のグローバル変数を1つ追加し,その変数を使って下図のような回転アニメーションを加える.回転アニメーションは全く同じである必要はない.

      func_bb8_rot

      以下,作例

      Code

      独自の図形描画関数を作る.

      六角形を描画する関数drawHexagon() 時分秒ごとに大きさが変わる六角形を描画する.

      func_hexagon

      Code

      引数のある関数のコール

      func_hexagon_call

      引数のある関数の定義

      func_hexagon_define

      返り値のある関数定義の構文

      仮引数は,区切りで複数記述できる. 受け取る情報の数だけ仮引数を宣言する.

      Code

      実引数と仮引数のおさらい

      func_hexagon_parameters

      例1

      回転角度を指定して星型多角形を描画する関数drawStar()

      anim_star_rot

      Code

      例2

      突起の数を指定してスパイク多角形を描画する関数drawSpikeBall()

      func_uni

      Code

      例3

      位置やスケール値を指定して顔のような模様を描画するdrawChiikawa()

      func_chiikawa

      Code

      例4

      位置やHSB値を指定して顔のような模様を描画するdrawChiikawa()

      func_chiikawa_hsb

      Code

      演習3

      以下のデ情君ロゴを描画する関数drawDejoukun()に引数を追加し,任意のアニメーションを加えた表現を作る.

      dinfo_logo_sample

      Code

      以下,作例

      func_dejoukun_rot_randcol

      Code

      関数内で別の関数を呼び出す.

      例1

      12個の六角形を描画する関数draw12Hexagons()内で六角形を描画する関数drawHexagon()を呼び出す.

      func_func_hexagons

      Code

      例2

      25個の顔を描画するdraw25Faces()内で顔を描画するdrawFace()を呼び出す.

      func_face_mouthopen

      Code

      時間を考慮したアニメーションのためのフレームワーク

      下記のプログラムをテンプレートとして使用することができる.

      一見複雑に見えるが,主に記述する箇所は以下の3か所

      1. 1行目:アニメーション用変数定義を記述する.

      2. 図形描画drawPrimitives(){}のブロック内を記述する.

      3. アニメーション用変数の更新updateAnim()のブロック内を記述する.

      Code

      例1

      1分間で水が溜まっていく表現

      func_anim_framework_mizu

      Code

      例2

      1秒ごとに幅が拡大縮小し,分の切り替わりでジャンプするデ情くんの表現

      func_dejoukun_jump

      Code

      例3

      1秒ごとに下へ移動し,分の切り替わりでしぼむ顔の模様の表現

      func_chiikawa_king

      Code

      演習4

      以下の時間を考慮したアニメーションのフレームワークを元に,任意のアニメーションを作成する. もしくは,前述の例1~3を元に変更を加える.

      Code

      第9回:再帰関数

      再帰関数の基本

      関数の中で再帰呼び出しを2回行い,半径を1/2にしながら円を描画する.

      recursive_circle

      Code

      再帰関数とは

      再帰呼び出し

      recursive_circle_call

      再帰の階層を表す仮引数

      recursive_circle_param

      再帰終了(続行)条件

      recursive_circle_condition

      最初の関数呼び出し

      スタックオーバーフローエラー

      再帰終了条件を正しく記述しないと,プログラムがフリーズし,ProcessingのGUIから終了することができなくなる. 以下のようなエラーが表示される.

      recursive_error_console

      仮にその状況に陥って知った場合の解決先を以下に示す.

      windowsの場合

      1. Ctrl + Shift + Esc キーを同時に押してタスクマネージャーを開く

      2. プロセス > 応答していないアプリケーションを右クリックする.

      3. 「強制終了」をクリックする.

      ウィンドウ右上の×ボタンをクリックし,プログラムを強制終了させる.

      Macの場合

      1. アップルメニュー >「強制終了」と選択

      2. 表示されるダイアログでアプリケーションを選択して、「強制終了」をクリックする.

      再帰関数を用いたテンプレート

      以下のプログラムをテンプレートとして用いるとよい.

      プログラムの記述ミスにより無限ループによるエラー落ちを防止できる.

      Code

      例1

      再帰深度ごとに塗色を変える.

      recursive_circle_gray

      Code

      例2

      最初の関数呼び出しを2回行う.

      recursion_circle_firtscall2

      Code

      例3

      半径を1/3にしながら円を再帰的に描画する.

      recursive_circle_gray_3

      Code

      演習1

      前述のいずれかの例を元に,任意のアレンジを加える.

      作例

      関数の中で再帰呼び出しを4回行い,4つの内包する円を再帰的に描画する.

      recursive_circle4

      Code

      入れ子構造の表現

      これらの図形は「自己相似」ともいう.

      例1

      モニターに自身のモニターを映す.

      recursion_ireko_monitor

      Code

      例2

      4分割した正方形の再帰描画

      recursive_4squares_divided_03

      Code

      例3

      簡易なアンモナイト状の模様

      recursion_ammmo

      Code

      演習2

      再帰関数を使い,自分なりの入れ子構造の作成を試みる.

      難しい場合,前述の例のプログラムにアレンジを加える.

      シェルピンスキーのカーペット

      曼荼羅のような図形の描画を行う. シェルピンスキーのカーペットともいう.

      段階を踏んだ演習形式で製作する.

      recursion_mandara

      1. 再帰プログラムのテンプレートをコピーする.

      前述の再帰プログラムのテンプレートをコピーする.

      Code

      2. ウィンドウサイズを書き換える.

      1000 × 1000

      Code

      3. 再帰関数名を書き換える.

      drawRecursiondrawMandara

      Code

      4. 描画内容を考える.

      recursive_mandara_concept01

      5. 引数を記述する.

      recursive_mandara_params

      Code

      6. 矩形描画命令を記述する.

      recursive_mandara_01

      Code

      7. 左上の再帰呼び出しを考える.

      recursive_mandara_unit

      8. 左上の再帰呼び出しを記述する.

      recursive_mandara_02

      Code

      9. その他周囲の7つ分の再帰呼び出しを考える.

      残りの7つの再帰呼び出しもステップ8と同様の考えで,下図を参考に考えることができる. recursive_mandara_next

      10. その他周囲の7つ分の再帰呼び出しを記述する.

      再帰呼び出しを7つ追加して記述する.

      recursion_mandara

      Code

      演習3

      前述のシェルピンスキーのカーペットに任意のアレンジを加える.

      作例

      recursion_mandara_sakurei

      Code

      再帰木

      木のような図形の描画 L System と呼ばれるアルゴリズムの簡易版

      段階を踏んだ演習形式で製作する.

      recursive_tree_finish

      1. 再帰プログラムのテンプレートをコピーする.

      前述の再帰プログラムのテンプレートをコピーする.

      Code

      2. ウィンドウサイズを書き換える.

      1000 × 1000

      Code

      3. 再帰関数名を書き換える.

      drawRecursiondrawTree

      Code

      4. 描画内容を考える.

      recursive_tree_params

      また,これらの仮引数に渡す最初の実引数は下図のようになる.

      recursive_tree_first_line

      5. 引数を記述する.

      引数を記述する.

      Code

      6. 終端のXY座標値を記述する.

      ある線の始点と角度,線の長さの情報があれば,三角関数を用いることで終点のXY座標値を算出できる.

      Code

      7. 線の描画命令を記述する.

      線の描画命令を記述する.

      recursion_tree_firstbranch

      Code

      8. 再帰呼び出しの実引数を書き換える.

      recursion_tree_change

      Code

      9. 枝分かれさせる.

      recursive_tree_second_lines

      recursion_tree_branch2

      Code

      10. 再帰の最大深度を増やす

      最大深度:16にする.

      recursive_tree_finish

      Code

      演習4

      前述の再帰木は以下の値を変えることで,形状の変化を操作できる. 任意のアレンジを加える.

      作例

      recursive_tree_param_change

      Code

      サンプル集

      座標変換を使った再帰木

      こちらの方がアレンジを加えやすい場合もある.

      recursive_tree_finish

      Code

      応用例

      recursion_tree_transform

      Code

      シェルピンスキーのギャスケット

      正三角形で構成される模様.

      recursive_triangle_step04

      Code

      再帰回数:0

      recursion_triangle_0

      再帰回数:1

      recursive_triangle_step01

      再帰回数:2

      recursive_triangle_step02

      再帰回数:3

      recursive_triangle_step03

      応用例

      シェルピンスキーのギャスケットを10個敷き詰め,半分は上下反転させる.

      recursive_triangle_example

      Code

      黄金比

      矩形を再帰的に黄金比に分割しつつ,弧を描画する.

      recursive_golden_rect

      Code

      応用例

      ゼンマイの束状の表現

      recursive_golden_rect_example

      Code

      矩形の再帰的分割描画

      recursive_rect_devided

      Code

      応用例

      矩形の代わりにカプセル状の図形で満たす表現

      recursive_rect_devided_example

      Code

      ドラゴン曲線

      フラクタル図形の一種. 「線を二等分し,角度が90°をなす二本の線を生成する」処理を再帰的に行うことで描画される図形.

      recursive_dragoncurve

      Code

      再帰回数:0

      recursive_dragoncurve_0

      再帰回数:1

      recursive_dragoncurve_1

      再帰回数:2

      recursive_dragoncurve_2

      再帰回数:3

      recursive_dragoncurve_3

      分割後の点の座標の求め方

      下図左のような(グレーの)直角三角形を基準に,幾何学的に分割後の点の座標値( fNewX, fNewY )を求めることができる.

      recursive_dragoncurve_model

      応用例

      recursive_dragoncurve_example

      Code

      コッホ曲線

      「線を三等分に分割し,正三角形を作る」処理を再帰的に行うことで描画される図形.

      recursive_kochCurve

      Code

      再帰回数:0

      recursion_koch_0

      再帰回数:1

      recursive_kochCurve_simple_01

      再帰回数:2

      recursive_kochCurve_simple_02

      分割後の3点の座標の求め方

      recursive_kochCurve_model

      上図のように,飛び出る点の座標( fPointXY[1][0], fPointXY[1][1] )は,二つの角度の合計から求めることができる.

      詳しくは調べてください. 再帰関数の中で三角関数の加法定理を用いているため,難易度高め.

      応用例1

      コッホ曲線を繋げた表現

      recursion_koch_snowcrystal

      Code

      応用例2

      雪の結晶のような模様の表現

      recursive_kochCurve_example

      Code

      マンデルブロ集合の描画

      recursive_maandelbrotSet

      Code

      ジュリア集合の描画

      recursive_juliaSet

      Code

      第10回:出力

      表示ウィンドウの画像を保存する.

      save()

      構文

      Code

      Code

      save_image

      https://processing.org/reference/save_.html

       

      動画を保存する.

      saveFrame()

      アニメーションのような連続した複数の画像出力することができる.

      構文1

      Code

      この構文では,TIFF (.tif) 形式のファイルが出力される.

      draw()ブロックの末尾に記述する.

      Code

      export_anim_noparams

      TIFFフォーマットの連番が付いた画像ファイルが保存される.

      構文2

      画像のフォーマットやファイル名を変更したい場合は,こちらの構文を用いる.

      Code

      ファイル名には複数のハッシュマークを記述する必要がある.

      ハッシュマーク

      #

      連番を指定するためにファイル名の指定にハッシュマークを含める必要がある. ハッシュマークがフレーム番号に置き換えられる. ハッシュマークの#数でフレーム番号の最大桁数を指定することができる.

      例1

      Code

      例2

      Code

      フレーム区間を指定して保存する.

      例えば,「20フレーム目から40フレーム目の区間を出力したい」という時がある.

      export_anim_selected_time

      frameCount

      プログラムを実行してから,現在の描画フレームの番号を取得するシステム変数.

      frameCountを使って以下のようにif文を用いることで,指定した2つのフレーム番号間だけ出力を行うことができる.

      Code

       

      フォルダを指定して保存する.

      画像や動画を保存する際,ファイル名にフォルダ(ディレクトリ)名を記述することで,出力するフォルダを指定できる. ファイルやディレクトリ間はスラッシュ/で区切る.

      Code
      Code

      Code

      export_anim_directory

      特に動画の保存等は,複数の出力ファイルを別フォルダにまとめることができるので活用したい.

      https://processing.org/reference/saveFrame_.html

      PDFへ出力

      方法

      1. ライブラリのインポート

        • (日本語)「スケッチ」メニュー > 「ライブラリをインポート」 > 「PDF Export」を選択

        • (英語版)「Sketch」メニュー > 「import Library」 > 「PDF Export」を選択

      pdf_01

      上記を選択すると,プログラムの一行目にimport processing.pdf.*;が追加される. メニューを使わず,直に入力も可能.

      pdf_02

      1. size()の記述を変更する. 以下のような構文に変更する.

        Code

         

      pdf_03

      1. プログラム末尾にexit();を追加. Activeモードを使用中ならsetup()ブロックの末尾に記述する.

      pdf_04

      1. プログラムを実行すると,pdfファイルが出力される. この時,表示ウィンドウは表示されない.

      pdf_05

      アプリケーションとして出力する.

      Processing で作成したプログラムをアプリケーションとして出力し,Processingが不要な汎用のアプリケーションとして配布することができる.

      1. 「ファイル」 > 「アプリケーションとしてエクスポート」を選択

        export_app_step01

      2. オプションを選んでエクスポート

        export_app_step02

        • フルスクリーンを止めたい時は,「フルスクリーン」 > 「プレゼンテーションモード」のチェックを外す

        • Mac OS X 用に出力する場合,「プラットフォーム」 > 「Max OS X」にチェックを入れる

        • Windows の場合,「Javaの埋め込み」にチェックを入れておいたほうが無難.

      3. 出力フォルダ

        Winsowsの場合,以下のようにフォルダが出力される.

         

        export_app_step03

        動作させるOSが64bitか32bitかで,使用するフォルダは異なる. 昨今のOSはほぼ64bitなので,こちらを用いることを前提とする. 「application.windows64」フォルダの中身が全て必要であるので,配布などを行う場合,このフォルダごと配布する.(フォルダのリネームは可)

      4. 実行ファイル

        Windowsの場合,以下の場所に実行ファイルが格納されている.

        「application.windows64」 > ファイル名.exe

        これを通常のアプリケーションのようにダブルクリックして実行する.

      第10回:デバッグ

      デバッグとは

      デバッガ

      プロセッシング デバッガ

      デバッガの有効と無効の切り替え

      debugger_icon

      ブレークポイントで止まる

      デバッガが有効にされている間は,プログラムの実行は必ずブレークポイントが設定されている行で一時停止する. デバッグを行う上で,この操作が基本で起点となる.

      ブレークポイントの設定方法

      ブレークポイントの設定はデバッガが有効にされている間にしか行えないことに注意.

      設定方法は3つある

      ブレークポイントが設定された行は以下のように行番号の表示が変化する.

      debugger_break_point_enable

      ブレークポイントの削除方法

      ブレークポイントが設定されている行にて,ブレークポイントの設定と同様の操作を行うとブレークポイントを削除できる

      変数ウィンドウ

      デバッガが有効な間にプログラムを実行すると,ブレークポイントが設定されているすべての行でプログラムが一時停止する.

      一時停止中に「Variables」という別ウィンドウに現在の変数の値が表示される.

      debugger_variables_plain

      ステップ

      一時停止中にステップアイコンをクリックすると,現在一時停止している行が実行され,次の行でプログラムが一時停止する. 一行ずつプログラムを進めることができる.

      通常のステップ以外にも,ステップイン,ステップアウトという機能もある.

      debugger_step_icon

      ステップイン

      関数が含まれる行において,ステップインを行うと,関数の中にステップを行う 通常のステップは,関数を含む行から次の行にプログラムの実行を進めるのみ. 関数内のプログラムの実行を詳細に観察したい場合に用いる.

      ステップアウト

      現在一時停止している位置が関数の中であれば,ステップアウトは関数の呼び出し元に処理を移す ステップインで関数内にステップを進めた後に,関数の呼び出し元に処理を戻す場合などに用いる.

      debugger_step_variation

      続行

      一時停止中に続行アイコンをクリックすると,現在一時停止している行からプログラム実行が再開される. 次のブレークポイントまでプログラムは停止しない.

      debugger_continue_icon

      停止

      一時停止中に停止アイコンをクリックすると,プログラムの実行を終了できる. デバッガの使用を終了し,デバッガを無効にしたい場合などに使用する.

      debugger_stop_icon

      コンソールへの出力

      print()

      構文

      文字列はダブルクォーテーション「"」で囲むこと

      Code
      Code
      Code
      改行を含めたい場合
      Code

      文字列をコンソールに表示する
      Code

      hello_processing

      数値をコンソールに表示する
      Code

      print_values

      数値と文字列をつなげて表示する
      Code

      print_values_strings

       

      演習1

      以下の出力を行うプログラムを書いてみましょう. ただし,数(1,2,3)は文字列ではなく数値としてプログラムに記述すること.(""で囲まない)

      1+2=3

      第11回:ライブラリの使用

      ライブラリ(Libraries)とは

      便利なプログラムの集まりをまとめ,他のプログラムで再利用できるようにしたもの

      Processingのライブラリは以下の二種類に分けられる

      https://processing.org/reference/libraries/

      インストールとインポート

      Contributed Librariesを使用するには,事前にインストールする必要があります. Core Librariesを使用する際は,「1.ライブラリのインストール」の手順はスキップできます.

      1. ライブラリのインストール

        • 「スケッチ 」> 「ライブラリをインポート」 > 「ライブラリを追加」

          library_tsuika

        • 「Contribution Manager」から,ライブラリを検索

          library_install_name

        • インストールしたいライブラリを選択し,インストール開始

          library_install_start

       

      1. ライブラリのインポート

        • 「スケッチ」メニュー > 「ライブラリをインポート」 > インポートしたいライブラリを選択

        • 上記を選択すると,プログラムの一行目にimport ライブラリ名.*;の一文が追加される.

          library_install_import

       

      https://processing.org/reference/libraries/

       

      第11回:インタラクション

      インタラクションとは

      相互作用のこと. ここでは,ヒューマンコンピュータインタラクション( Human-Computer Interaction )のことを指す. 本来は人とコンピュータの相互作用の仕組みを探求する大きな研究分野.

      この章では,ヒューマンコンピュータインタラクションにおける基礎として,マウスやキーボードによる入力方法を学ぶ.

      マウス

      マウスポインタの座標値

      mouseX

      mouseY

      マウスポインタの位置に円を描画する

      Code

      interactin_mouse_xy

      https://processing.org/reference/mouseX.html https://processing.org/reference/mouseY.html

      マウスポインタの座標値(前フレーム)

      pmouseX

      pmouseY

      直前の描画フレームにおけるマウスポインタの座標値が格納されている. マウスポインタを素早く動かすと,mouseX, mouseY の値との差が大きくなる. pmousX, pmouseYとの差から,マウスポインタの移動の速さ方向を取得できる.

      例1

      マウスポインタの移動の軌跡の描画.

      Code

      interactin_pmouse_xy

      例2

      マウスポインタに少し遅れて追従する円の描画.

      Code

      interaction_pmouse_xy_circle

      https://processing.org/reference/pmouseX.html https://processing.org/reference/pmouseY.html

      マウスボタンが押されているか

      mousePressed

      いずれかのマウスボタンが押されているか,押されていないかの情報がブール値( true, false )で格納されている.

      マウスボタンが押されている間は継続的にtrueとなる.

      マウスボタンを押し続けると色が変わる矩形の描画

      Code

      interaction_pressed_fade

      https://processing.org/reference/mousePressed.html

      押されているマウスボタンの種類

      mouseButton

      押されたマウスボタンの種類に応じ,LEFT, RIGHT, CENTERのいずれかの値が格納される. mousePressedと組み合わせて使用することが多い. mouseButtonの値は,マウスの状態が変化する(ポインタが移動するorマウスボタンが押される)まで残る点に留意.

      例1

      マウスボタンの種類に応じ,対応する矩形の色を変える.

      Code

      interaction_mouseButton

      https://processing.org/reference/mouseButton.html

      https://processing.org/tutorials/interactivity/

      例2

      簡易的なキャンバス

      Code

      interaction_canvas_simple

      演習

      例2を自由にアレンジしてみましょう

      演習時間:8分程度

      作例

      interaction_canvas_sakurei

       

      応用例

      再帰呼び出し-コッホ曲線のサンプルの雪の結晶を,左クリックしたときのポインタ位置に描画する.

      Code

      interaction_kochcurve_ouyou

      キーボード

      キーが押されているか

      keyPressed

      キーが押されているか,押されていないかの情報がブール値で格納されている.

      いずれかのキーを押し続けると色が変わる矩形の描画

      Code

      interaction_key_pressed

      押されたキーの種類

      key

      直前に使用されたキーの値(英数字)が格納される. 英数字以外の特別なキー(矢印,Alt, Ctrl, Shift など )が使用された場合,CODEDの値が格納される.

      例1

      押したキーのテキスト描画を行う

      Code

      interaction_key

      例2

      WASBキーにより円を移動させる.

      Code

      interaction_key_circle

      特殊なキーの取得

      keyCode

      アロー(矢印)キーや英数字以外の特別なキーが押されると,押されたキーの値が格納される.

      例1

      押したアロー(矢印)キーの方向に円を移動させる. ※見た目は一つ前の例と同じ

      Code

      interaction_key_circle

      例2

      押したアロー(矢印)キーの方向にテキストを移動させ,移動方向に対応したテキストを描画する.

      Code

      interaction_keycode

       

      演習

      以下のプログラムを自由にアレンジしてみましょう

      演習時間:8分程度

      テキストを描画する簡易キャンバス

      Code

      interaction_key_text_canvas

      作例

      形式は2種類に減らし,ホイールボタンで消去.

      interaction_key_text_canvas_sakurei

       

      応用例

      上下に跳ねるアニメーションをする円をアローキーで左右に移動させる.

      Code

      interaction_key_circle_anim

      イベント

      マウスやキーボード入力のような特定の出来事(イベント)が起こった際にコールされるイベント関数を定義することができる. イベント関数と,イベント関数をコールするイベントの対応は下表のとおり.

      イベント関数名イベント
      mouseClicked()マウスボタンがクリックされた時
      mousePressed()マウスボタンが押された時
      mouseReleased()マウスボタンが離された時
      mouseDragged()マウスドラッグが行われている時
      mouseMoved()マウスが動かされている時

      Processingにおいては,上表のように特定の名前の関数を定義することで,イベントが起きたときに対応するイベント関数のブロック文が実行される

      Code

      イベント関数を用いることで,入力処理をsetup()draw()から分割し独立させることができ,メインの描画プログラムがスマートになる. ただし,イベント関数に記述する命令は主にグローバル変数の更新式であり,描画命令を記述することは推奨しない draw()でスクリーンのリフレッシュを行うと,イベント関数で実行された描画命令は1フレームしか描画されないため.

       

      マウスイベント

      マウスボタンがクリックされた時.

      mouseClicked()

      マウスボタンが押され,離された時1度だけコールされる関数.

      マウスボタンがクリックされる毎に矩形の白黒を切り替える.

      Code

      interaction_mouseClicked

      https://processing.org/reference/mouseClicked_.html

      マウスボタンが押された時.

      mousePressed()

      マウスボタンが押された時に1度だけコールされる関数. 押され続けた時の処理はmousePressedが適当.

      https://processing.org/reference/mousePressed_.html

      マウスボタンが離された時.

      mouseReleased()

      マウスボタンが離された時に1度だけコールされる関数.

      https://processing.org/reference/mouseReleased_.html

      マウスを押したままポインタを動かし,離すとその間の線を描画する.

      Code

      interaction_mousepressed_released

      マウスドラッグが行われた時.

      mouseDragged()

      マウスボタンが押された状態でポインタが動かされている時に継続的にコールされる関数.

      例1

      マウスをドラッグすると矩形のグレー値が5ずつ増える.

      Code

      interaction_mouseDragged

      例2

      マウスをドラッグするとポインタの座標に円が追従する.

      Code

      interaction_mouseDragged_tsuiju

      https://processing.org/reference/mouseDragged_.html

      マウスポインタが動いている間に処理を行う.

      mouseMoved()

      マウスポインタが動かされており,かつボタンが押されていない時に継続的にコールされる関数.

      https://processing.org/reference/mouseMoved_.html

       

      演習

      乱数を使った再帰呼び出しによる静止画描画を,マウス左クリックする毎に再度実行されるようにする. また,右クリックで画像を保存できるようにする.

      元となる再帰呼び出しによる静止画描画

      まず,下のプログラムをコピーして実行してみる.

      木の描画に乱数を加えたもの.

      Code

      interaction_mouseclicked_recursive_01

      1. 再帰関数の呼び出しをdraw()へ切り出す

      background()も移動させる必要があることに留意.

      Code

      2. 描画フラグとなるグローバル変数の追加

      グローバル変数の宣言文int iDraw;を記述する. また,iDrawsetup()において1で初期化する.

      Code

      3. 描画フラグが1の時だけ描画を行うようにする.

      draw()ブロック内の描画命令が,iDrawの値が1の時だけ実行されるようにする.

      Code

      4. 描画後に,描画フラグを0にする.

      静止画における全ての描画命令の後にiDraw0を代入する.

      Code

      5. マウス左クリックがされたら描画フラグを1にする

      イベント関数mouseCliced()を定義し,ブロック文の中でiDraw1を代入する.

      Code

      左クリックをする毎に,再度異なる乱数の値によって描画結果が変わる.

      interaction_mouseclicked_recursive_02

      6. 保存する画像の番号用グローバル変数の追加

      グローバル変数の宣言文int iImageNo;を記述する. また,iImageNosetup()において0で初期化する.

      Code

      7. 右クリックで画像を保存する機能の追加

      イベント関数mouseClicked()に,右クリックされたら画像を保存する命令を追加する. また,保存後にiImageNoに1を加える. 詳細は下のプログラムを参考のこと.

      Code

      右クリックをすると,連番付きの画像ファイルが保存される. 乱数を使った静止画において,よりよい画像をピックアップしやすくなる.

      interaction_mouseclicked_recursive_03

       

      キーイベント

      キーが押された時

      keyPressed()

      いずれかのキー押されている時に継続的にコールされる関数.

      いずれかのキーが押される毎に線が横に移動する.

      Code

      interaction_keypressed_line

      https://processing.org/reference/keyPressed_.html

      キーが離された時

      いずれかのキー離された時に一度だけコールされる関数.

      キーを押している間に円の大きさを大きくし,キーが離された瞬間に円の大きさをリセットする.

      Code

      interaction_keyreleased_circle

      https://processing.org/reference/keyReleased_.html

       

      GUI

      概要

      Graphical User Interface コンピュータの画面上に表示されるグラフィックスを元に操作を行うインターフェースのこと. 基本の入力(マウスやキーボード)で実現するのは難しいので,ライブラリを用いる.

      必要なライブラリ

      数種類あるが,ここでは日本語ドキュメントが豊富なControlP5を使用する. ライブラリ名:ControlP5 Contributed libraries(インストールの必要あり)

      導入方法

      1. ライブラリのインストール

        • 「スケッチ 」> 「ライブラリをインポート」 > 「ライブラリを追加」

          interaction_gui_lib_install01

        • 「Contribution Manager」から,ライブラリを検索

          検索窓にControlP5を入力してフィルタリング

          interaction_gui_lib_install02

        • ライブラリを選択後,Installボタンをクリックしインストール開始

          interaction_gui_lib_install03

      1. ライブラリのインポート

        • 「スケッチ」メニュー > 「ライブラリをインポート」 > ControlP5を選択

          interaction_gui_lib_import01

        • 上記を選択すると,プログラムの一行目にimport ライブラリ名.*;の一文が追加される.

          interaction_gui_lib_import02

      ControlP5を使う流れ

      クラスの概念を理解していないと難しいので,完全に理解する必要はありません.

      1. GUIのすべてのパーツを管理するControlP5オブジェクトを作成する.

        ControlP5 cp5;

      2. GUIパーツを作成する. パーツの種類によって宣言の型が異なる

        Code
      3. ControlP5を初期化する.

        Code
      4. ControlP5オブジェクトにGUIパーツを追加する. ※見やすいように改行をしている. パーツの種類によって構文が異なる.

        • スライダー

          Code
        • スライダー(2D)

          Code
        • トグルスイッチ

          Code
        • カラーホイール

          Code
      5. GUIパーツから値を取得する.

        スライダーの例

        Code

      具体的な使い方は次の項を参照のこと.

      GUIパーツ別の実装方法

      スライダー

      1つのパラメータを制御できる.

      例1

      スライダーで矩形の色を変更する.

      Code

      library_gui_slider_single

      例2

      2つのスライダーで矩形の色と大きさを変更する.

      Code

      library_gui_slider_double

      2Dスライダー

      2つのパラメータを制御できる.

      2Dスライダーで矩形の色と大きさを変更する.

      Code

      library_gui_2dslider

      トグルスイッチ(Toggle)

      スイッチのように,オンかオフかの2値(true, false)を取得できる.

      トグルスイッチにより,矩形の移動アニメーションのオンオフを行う.

      Code

      library_gui_toggle

      カラーホイール(ColorWheel)

      3つのカラー値をコントロールできる.

      カラーホイールで矩形のRGB値を変更する.

      Code

      library_gui_colorwheel

      キャプチャー

      概要

      コンピューターに接続したキャプチャーデバイス(カメラ)からビデオデータを取得し,Processing上で再生する.

      必要なライブラリ

      対応デバイス

      USB Cameras, IEEE 1394 (Firewire) Cameras

      導入方法

      1. キャプチャーデバイス(USBカメラ)をコンピューターに接続する.

        • コンピュータ内蔵カメラの場合は不要

      2. 以下のプログラムをProcessingで実行

      Code
      1. 映像が表示されなかった場合,以下のコンソールの表示を確認 使用したいカメラの要素番号(cameras[要素番号])を確認する.

      library_capture_console

      1. 使用したいカメラの要素番号をキャプチャー初期化時に指定するよう,プログラムを書き換える.

        このサンプルの場合,HD Pro Webcam C920を使いたいので,cameras[1]

        library_capture_rewrite

      2. 実行して正しくキャプチャーできているか確認する

      https://processing.org/reference/libraries/video/Capture.html

       

      カメラ画像のピクセル情報を取得してモザイク状に描画する.

      Code

      library_capture_sample_ss

       

      第12回:クラス

      概要

      クラスとは

      「Human」クラスの定義の例

      Code

      オブジェクト指向プログラミング

      object-oriented programming (OOP)

      実行時の動き

      「Human」クラスの実行の例

      Code

      クラスの定義

      class

      クラスの要素

      クラスは以下の要素で構成される

      「Human」クラスの定義の例

      class_youso

      このように,クラスの持つデータや関数は特別な呼称となっている. 主なプログラミング言語別の呼称は下の表のとおり.

      クラスの持つ要素JavaC#C++
      データ(変数や配列)フィールドフィールドメンバ変数
      関数メソッドメソッドメンバ関数

      ProcessingはJavaをベースとしているので,本授業ではJava準拠の呼称を用いる.

      クラスの定義

      構文

      クラス名は一文字目を必ず大文字にする必要がある.

      Code

      フィールド

      Code

      従来の変数や配列の宣言文と同様の記述方法.

      コンストラクタ

      クラス特有のため,少し独特の記述方法.

      Code

      メソッド

      Code

      クラスを使用する

      クラスの定義後,クラスを使用するには以下のステップへ経る必要がある.

      「Human」クラスの実行の例

      class_instance_works

      インスタンスの宣言

      前述の通りクラスは「型」であるため,クラスを使うにはクラスのインスタンス(実体)を作成する必要がある. 基本的には関数ブロックの外(プログラムの最初)に記述する.

      構文

      Code

      構文(配列)

      インスタンスを複数作成する場合は,配列形式で宣言すると便利.

      Code

      インスタンス名は任意の名前を付けることができる.

      「Human」クラスのインスタンスの宣言

      Code
      Code

      インスタンスの生成

      基本的にはsetup関数内に記述する.

      構文

      Code

      「Human」クラスのインスタンスの生成

      Code

      引数の170, 60は,身長と体重の初期値となる.

      インスタンスのコール

      基本的にはdraw関数内に記述する.

      構文

      Code

      「Human」クラスのメソッドのコール

      Code

      「Human」クラスを使った,年齢を重ねた人のバイオデータのアニメーション.

      class_biodata

      Code

      https://processing.org/tutorials/objects/ https://docs.oracle.com/javase/tutorial/java/concepts/index.html

       

      演習

      直前の「Human」クラスのプログラムを元に,「Human」クラスにバイオデータ(フィールド)を追加し,さらにコンソールに表示されるように変更を加える.

      追加するフィールドや,grow()メソッドによる更新式は自由.

      追加するバイオデータの例

      演習時間:10分程度

       

      クラスを使った描画

      クラスの設計は自由だが,描画を行うための典型的な設計の仕方を紹介する. まず,以下のようにメソッドを設計する.

      これらのメソッドに必要なフィールドを逐次追加する.

      つまり,以下ようなテンプレートになる.

      Code

      「Car」クラスを使った車のアニメーション

      class_example_car

      Code

       

      演習

      概要

      class_face_draw_clear

      1. setup関数を用意する.

      Code

      2. Faceクラス定義の枠を作る.

      「Face」の一文字目は大文字であることに注意

      Code

      3. フィールドを宣言する.

      顔ごとに個性が現れるデータを変数として宣言する.

      本来は入念に設計する必要があるが,今回は割愛.

      Code

      4. コンストラクタの枠を作成する.

      コンストラクタはフィールドを初期化するための特別なメソッド.

      Code

      5. コンストラクタを定義する.

      コンストラクタの中でフィールドをランダム値で初期化します.

      Code

      6. テスト用Faceインスタンスを作成する.

      テスト用なので「faceTest」という名前

      Code

      7. Faceインスタンスを初期化する.

      Code

      8. 描画のためのメソッドの枠を作成する.

      「draw」という名前でFaceクラスにメソッドを定義する. ブロック内の命令は空のまま

      Code

      9. drawメソッドをコールする

      setup()の中でテスト用インスタンスのメソッドをコールする. また,顔を画面中心に描画するために座標変換命令も追加します.

      Code

      10. drawメソッドに描画命令を追加する.

      drawメソッドの中でフィールドの変数を使い,描画を行う.

      Code

      class_face_first_draw

      11. インスタンスを4つ作成する

      1. 以下の2つの文はテスト用だったので削除します.

        • Face faceTest; // テスト用Faceインスタンスを作成

        • translate(width/2,height/2);

      2. Faceクラスのインスタンス配列を作成します.

        • 配列名: faces

        • 要素数: 4

      ※この段階ではエラーでプログラムは未だ実行できません.

      Code

      12. インスタンスの初期化を書き換える

      4つのインスタンスは配列に格納されているので,初期化の記述も書き換えましょう. 配列の初期化方法を思い出してください.

      ※この段階ではエラーでプログラムは未だ実行できません.

      Code

      13. 描画メソッドのコールを書き換える

      Code

      実行すると,画面左上に4つの顔が重なって表示されてしまう.

      14. 4つのインスタンスを並べて表示する

      Faceインスタンスの描画命令周りに座標変換を使い,並べて表示するよう変更します.

      Code

      class_face_draw_clear

       

      クラスファイルの分割

      演習

      演習を通して以下のプログラムをクラスファイルに分割してみましょう.

      「Car」クラスを使った車のアニメーション(前述と同じ)

      Code
      1. (分割する前の)スケッチを保存する

      class_divide_first_save

      1. タブの横の「▽」をクリック

      class_divide_click_tab

      1. 新規タブを選択

      class_divide_new_tab

      1. 新しく作成するクラス用のファイル名を入力

        • クラスをファイルにする場合には,ファイル名は必ずクラス名と同じにしなければならない.

        • この例では「Car」

      class_divide_file_name

      1. 新しく作った空のタブが開かれる

      class_divide_file_created

      1. ここにクラス定義の記述を追加する. Car_drive.pde(メインプログラム)に元々記述していたクラス定義は削除する.

      class_divide_file_paste

      1. ファイル分割後のディレクトリは以下のようになる

        • スケッチフォルダ名「Car_drive」と同名の「Car_drive.pde」がメインプログラムファイルとなる

          • setup関数やdraw関数を記述する.

        • 「Car.pde」がクラスファイル

          • Carクラスのクラス定義を記述する.

      class_divide_directry

       

      クラスによる高度な描画

      複数の犬が走るアニメーション

      class_sample_dogs_run

      Dog_run.pde (メインプログラム)

      Code

      Dog.pde(クラスファイル)

      Code

       

      演習

      自由にクラスを使った静止画描画プログラムを作ってみましょう. クラスを使った課題がないため,ここで試行錯誤してもらうのが狙い. 時間内に完成する必要はない.

      演習時間:20分程度

      以下のテンプレートを使うのもよい.

      正方形と円を描画するクラスをランダムな位置に配置するプログラム

      Code

      class_jiyuu_enshuu_template

      作例

      class_dango_sakurei

      Code

       

      オブジェクト指向プログラミングの利点

       

      オブジェクト指向分析・設計

      複数のクラスを用いた,より複雑なプログラムの設計を行う際は,オブジェクト指向的な設計能力が求められる. 実装(プログラミング)の前準備だが,重要な工程

      クラスの設計

      重要な考え方,心構え

      クラスの設計を行う際に重要な考え方,心構えは従来のエンジニア的な思考とは異なる.

      求められる資質

      物事の構造や本質を見抜き,洞察する能力 > 旧来のエンジニアリング知識,コーディング能力

      つまり,誰でもクラスを用いたプログラミング能力が向上する可能性がある.

      第13回:最終講評

      未整理プログラム置き場

      再帰関数を使った描画基礎

      描画命令を記述する位置

      「再帰関数の呼び出し-例2」のプログラムに描画命令を加える場合を考える. 以下,変更を加える前のプログラム.

      Code

      recursive_divide_console

      このプログラムに描画命令を加える位置は下図の通り.(print()命令を記述していた部分)

      recursive_draw_add_place

      上図のように,再帰呼び出しを終了させるif文の前に記述するのが一般的.

      描画命令の記述の仕方

      仮引数fValueを用いて描画命令を記述することになる. 再帰呼び出しの度に仮引数fValueの値は2分の1に変化している.

      この特性を使って,描画領域を再帰的に分割するプログラムを記述できる.

      Code

      recursive_draw_add_divide

      このプログラムでは,矩形の横幅の大きさの指定に,仮引数fValueを用いている.

      さらに命令を追加する.

      下のプログラムではスクリーンサイズを200×100,塗り色の指定を加えている.

      Code

      recursive_draw_add_divide_ad

      演習3

      正方形を再帰的に4分割する再帰関数を定義する.

      recursive_4squares_divided

      1.ウィンドウを表示する.

      Activeモードでウィンドウを表示させるところまで記述しましょう. ※静止画なのでdraw()は不要

      Code

      2. 再帰関数定義を準備する.

      void関数draw4Squares()を定義しましょう.

      Code

      仮引数fSizeこれから分割する領域全体の大きさの情報を表す.

      3. 再帰関数を呼び出す.

      描画結果がいち早く確認できるよう,再帰関数の呼び出しを記述してしまいましょう. setup()に以下の処理を追加しましょう.

      Code

      この引数400が再帰呼び出しにより,2分の1に分割されていくことを念頭に置いておく.

      4. 3つの正方形を描画する.

      void関数draw4Squares()に正方形の描画命令を追加する. 下図を参考に,仮引数fSizeを用い,右上,左下,右下に3つの正方形を描画する.(左上は空白)

      recursive_4squares_divided_02

      Code

      recursive_4squares_divided_01

      この描画を再帰呼び出しにより繰り返すことになる.

      5. 再帰を続行するif文を記述する.

      void関数draw4Squares()の最後に以下のif文と空のブロックを追加する.

      Code

      再帰の続行条件をfSize > 4としたのは,分割する領域の大きさが4以下の場合,それ以上分割しても視覚的には無意味であるため.

      6.再帰呼び出しを記述する.

      ステップ5.で追加したif文のブロックに,以下の再帰呼び出しを記述しましょう.

      Code

      recursive_4squares_divided

      この再帰呼び出しによって,左上の正方形のエリアに再帰的に描画が行われる.

      右下に再帰的に描画を行いたい場合,以下のように平行移動の命令を追加する必要がある.

      Code

      recursive_4squares_divided_03

       

      複数の引数をもつ再帰呼び出し

      再帰関数の引数を複数にすると難易度が上がるが,再帰による描画の表現の幅が広がる.

      例えば,以下のような再帰関数.

      Code

      演習4

      螺旋状の連続した線を再帰呼び出しで描画する.

      recursive_rasen_lines

      1.ウィンドウを表示する.

      Activeモードでウィンドウを表示させるところまで記述する. ※静止画なのでdraw()は不要

      Code

      2. 再帰関数定義を準備する.

      void関数drawLines()を定義する.

      Code

      仮引数fLength線の長さの情報を表す.

      3. 最初の再帰関数の呼び出しを記述する.

      描画結果がいち早く確認できるよう,再帰関数の呼び出しを記述する.

      Code

      実引数160は,最初の線の長さの情報をdrawLines()に渡す.

      4. 再帰呼び出しを記述する.

      下図のように,最初の線の長さ160が再帰呼び出しの度に0.85倍されていくように,記述を行う.

      recursive_rasen_lines_length

      drawLines()に,以下のように再帰呼び出しを記述する.

      Code

      この段階では,描画が行われていない.

      5. 線描画命令を記述する.

      drawLines()に,以下のように線の描画命令を記述する.

      Code

      recursive_rasen_lines_01

      現状では再帰的に線を描画するための情報が足りていない. これからしばらくは,必要となる変数や仮引数の用意を行っていく.

      6. 角度を受け取る仮引数を追加する.

      下図のように,再帰呼び出しの度に線が30°回転されていく.

      recursive_rasen_lines_degree

      下のように,角度を示す仮引数fDegreeを追加し,関連する関数呼び出しの記述も書き換える.

      Code

      7. 線を開始する点の座標値を受け取る仮引数を追加する.

      これまでの段階で,線の長さと角度の情報が得られたが,線を開始する点の情報が不足している. 下図のように,最終的には4つの引数が必要となる.

      recursive_rasen_lines_params

      下のように仮引数fBeginX, fBeginYを追加し,関連する記述も書き換える.

      Code

      再帰呼び出しにおいて,本来なら次の線の開始点のXY座標値を渡す必要があるが,一時的にfBeginX, fBeginYをそのまま渡している.

      8. 線が終了する点の座標を求める.

      line()を用いて描画を行うには,線を開始する点のXY座標値に加え,線を終了する点のXY座標値が必要となる. ある点から伸びる線のXY成分値は三角関数を用いて下図のように算出することができ,これを元に必要なXY座標値が得られる.

      recursive_rasen_lines_endXY

      三角比

      ※演算と変数で学習済み

      triangle_func_def

      下のように記述し,線の終端の点のXY座標値をローカル変数fEndX, fEndYに代入する.

      Code

      線を開始する点の座標値fBeginX, fBeginYに,三角比の計算で得られた値を加えていることに留意. この段階で変数及び仮引数の準備が整ったので,以降はそれらを描画命令や再帰呼び出しに組み込んでいく.

      9. 描画命令や再帰呼び出しの書き換え.

      下のように,描画命令と再帰呼び出しを書き換える.

      Code

      recursive_rasen_lines_02

      線を終了する点の座標値fEndX, fEndYは,次の線における線を開始する点の座標値となるため,再帰呼び出しの引数として記述する.

      10. 描画を整える.

      下では,線の終端の円の描画や線の太さの設定などの記述を追加している.

      Code

      recursive_rasen_lines

       

      再帰呼び出しを複数回行う

      再帰呼び出しを複数回同時に行うことで,再帰を枝分かれさせることができる. より複雑な模様が生成できる.

      Code

       

      再帰void関数の定義

      再帰関数は関数の一種であるので,まず関数の定義を行う必要がある. 再帰関数の定義を記述したら,setup()draw()内で再帰関数をコールする.

      ここではvoid関数を用いた構文を学習する. 条件式の種類によっておおまかに二通りの構文に分けられる.

      構文1

      再帰呼び出しを続ける条件式を記述する構文

      Code

      構文2

      再帰呼び出しを終了する条件式を記述する構文

      Code

      上記の二通りの構文は,実は本質的には違いがあまり無い. 目的や好みに応じて構文を使い分ければよい. return文に抵抗があるなら構文1を推奨する.

      例1

      引数の値の回数だけ再帰呼び出しを行う再帰関数の定義.

      Code

      仮引数iCountから1を引いた値を,次の再帰呼び出しの際に実引数として渡している. 再帰の続行条件は,仮引数iCountが0より大きいこと.

      例2

      引数の値を2で割り,割った後の値を引数として再帰呼び出しを行う再帰関数

      Code

      仮引数fValueを2で割った値を,次の再帰呼び出しの際に実引数として渡している. 再帰の続行条件は,仮引数fValueが5より大きいこと.

       

      演習1

      下図の①,②に何を記述すればよいか考えてみましょう.

      再帰関数recursiveScale()の要件

      recursive_scale_quiz

      演習時間:1分程度

       

      再帰関数の呼び出し

      前述の例1で定義した再帰関数を使用したプログラムを元に,再帰呼び出しの流れを見ていく. 以下のプログラムでは,再帰関数recursiveCount()setup()から呼び出している.

      Code

      recursive_count_simple_console

      この再帰関数は結果として,最初に渡した実引数「4」の回数だけ再帰呼び出しを繰り返していることがわかる.

      最初の呼び出しの流れ

      1. setup()から関数recursiveCount(4)を呼び出す.

      print()命令は削除しています.

      recursive_step_01

      コールスタックとは,関数呼び出しの情報を保存したメモリ領域.  呼び出された関数は,それぞれの仮引数やローカル変数などのデータを保持している.

      2. 仮引数に値が渡される.

      recursive_step_01

      3. 条件式の評価.

      recursive_step_02

      4. recursiveCount( 3 )の呼び出し.

      recursive_step_03

      5. 仮引数に値が渡される.

      recursive_step_04

      6. 条件式の評価.

      recursive_step_05

      7. recursiveCount( 2 )の呼び出し.

      recursive_step_06

      8. 仮引数に値が渡される.

      recursive_step_07

      9. このような再帰呼び出しが,引数が0になるまで繰り返される.

      recursive_step_08

      10. recursiveCount( 0 ) の呼び出し.

      recursive_step_09

      11. 条件式の評価.

      条件式が偽となるため,if文のブロックは実行されない.

      recursive_step_10

      12. recursiveCount( 0 ) の終了.

      その後にも,recursiveCount( 0 )ブロックには特に命令が記述されていない.

      recursive_step_12

      13. 呼び出し元のrecursiveCount( 1 )へ戻る.

      recursiveCount( 0 ) の呼び出し元の位置はif文のブロック内.

      recursive_step_13

      14. recursiveCount( 1 )の終了.

      その後,recursiveCount( 1 )ブロックには特に命令が記述されていない.

      recursive_step_14

      15. 逆順にrecursiveCount()が終了していく.

      このように,呼び出された順番と逆順にrecursiveCount()が終了していく.

      recursive_step_15

      16. 最初の呼び出し元に戻る.

      recursive_step_16

      例3

      例2で定義した再帰関数recursiveDivide()setup()から実行した例.

      Code

      recursive_divide_console

      このような再帰関数は図形を分割して描画する等の表現に応用できる.

       

      演習2

      演習1と同じ再帰関数recursiveScale()を定義し,引数の値1を渡してsetup()から呼び出してみましょう. また,例3を参考にprint()命令を記述し,下図のようにコンソール出力を行いましょう.

      再帰関数recursiveScale()の要件(演習1と同じ)

      演習時間:4分

      recursive_scale_console

       

      返り値のある再帰関数の定義と呼び出し

      返り値のある関数を用いて再帰関数を定義することもできる. 本授業で用いるにはあまり適していないので,構文等は割愛する.

      例1

      1から始まり,ある数nまでの数の和を求める再帰関数.

      1+2+3+4+5++n
      Code

      例2

      例1の再帰関数を用い,1から始まり10までの数の和を求める.

      Code

      recursive_nsum_console

       

      return文

      関数が値を返すための命令文をreturn文という. 以下のような構文で具体的な値を返す.

      Code
      Code
      Code

      返り値のある関数による表現

      返り値のある関数の構文

      関数の定義は,返り値のある関数と返り値のないvoid関数で,多少異なる.

      Code

      引数は「,」区切りで複数記述でき,記述しない(0個)こともできる. 定義された関数のブロック内で,仮引数を用いて計算等を行う. また,return文という命令文で関数が返す値(返り値)を指定する.

      例1

      3つの引数を受け取り,それらの平均値を返す関数.

      Code

      func_calcAverage

      例2

      1つの引数を受け取り,その値を半径とした円の面積を返す関数.

      Code

      ###

      描画:返り値のある関数

      複雑な計算を行う処理を関数にまとめることができる.

      void関数の定義の方が使用頻度は高い.

      例1

      円の面積を元に,異なるアルファ値を持つ正円をランダム描画するアニメーション 円の面積が大きいほど,小さいアルファ値となる.

      Code

      func_circle_area_random_alpha

      例2

      ランダムな大きさの矩形の並列描画. 関数の定義の中で描画を行いつつ,値を返すこともできる.

      Code

      func_random_rects

      例2

      サイン波とコサイ波のアニメーション

      my_func_sample_wave

      Code

      if文で返り値を分岐させる

      if文などで条件分岐を行うと,return文を複数記述できる.

      2つの引数を受け取り,大きい方の値を返す関数.

      Code

      ただし,必ずいずれかのreturn が実行されるように記述しなければならない. 以下,不可な例

      Code

       

      演習2

      下図のような多角形描画行う関数を定義してみましょう.

      my_func_practice00_01

      下の手順を参考にしてください.

      1.ウィンドウを表示する.

      Activeモードでウィンドウを表示させるところまで記述しましょう.

      Code

      2. 矢印を描画する関数定義を準備する.

      void関数drawArrow()を定義しましょう.

      Code

      3.drawArrow()を画面中心でコールする.

      draw()に以下の記述を追加しましょう.

      Code

      4.矢印のプロポーション用グローバル変数を定義する.

      矢印の各プロポーションを以下のようにグローバル変数で定義し,初期値を入力してください. (アニメーションではなく,定数として用いる)

      Code

      それぞれのグローバル変数の値は,下図のように矢印各部の大きさに対応する.

      my_func_practice00_02

      Code

      5. 多角形描画を用いて矢印の描画を行う.

      多角形描画を使って矢印を描画する命令をdrawArrow関数に追加する.

      my_func_practice00_04

      Code

      6. 仮引数を元に座標変換を行う.

      今のままでは仮引数が使われていないので,これらを使って座標変換を行いましょう. 以下の記述をdrawArrow()に追加しましょう.

      my_func_practice00_05

      Code

      7. 座標変換のリセット

      実はステップ6のままでは,関数実行後も変換された座標系が残ったままである. 基本的には関数内で行った座標変換は,関数内で戻しておいた方がよい. drawArrow()に以下の記述を追加する.

      Code

      以上の手順で,drawArrow()という独自の矢印図形を描画する関数を作成することができた.

       

      演習3

      演習2のプログラムを元に,拡大縮小機能を追加し,drawArrow()を呼び出してレイアウトを行う.

      1. drawArrow()に拡大縮小用の引数を追加する.

      矢印の大きさを変更(拡大縮小)できるよう,以下のようにdrawArrow()を書きかえる.

      また,関数コールの記述を以下のように書き換える.

      Code

       

      Code

      2. 仮引数fScaleを用いて座標系を拡大縮小する.

      drawArrow()に以下の記述を追加する.

      my_func_practice01_06

      Code

      これでdrawArrow()は完成した.

      3. drawArrow()を使った様々な表現

      drawArrow()を使って色々な描画を試してみましょう. 静止画ならsetup()内,アニメーションさせたいならdraw()内で呼び出しましょう.

      また,以下の部分の数値を変更することで矢印のプロポーションを変更できる.

      Code
      作例1

      40°ずつ回転させながら描画する.

      draw()のみ記載

      Code

      my_func_practice01_02

      作例2

      円周上に並べる

      draw()のみ記載

      Code

      my_func_practice01_03

      作例3

      並進

      draw()のみ記載

      Code

      my_func_practice01_04

      作例4

      並進(拡大縮小あり)

      draw()のみ記載

      Code

      my_func_practice01_05

      作例5

      移動と跳ね返りアニメーション

      drawArrow()の関数定義以外を記載

      Code

      my_func_practice01_06

      関数から別の関数を呼び出す

      関数の中で別の関数を呼び出すことも可能. 詳しくは,後の「再帰」のセクションで.

      Code

       

      より高度な表現

      演習

      顔のような描画

      my_func_practice_simple_02

      1.setup(),draw()を記述

      Code

      2.顔を描画する関数を定義

      ブロック内の命令以外の枠だけ用意しましょう.

      Code

      3.drawFace関数をsetup()内で呼ぶ

      これで関数drawFace()は実行されるようになります.

      Code

      4.drawFace関数内に図形描画命令を追加

      drawFace()のブロック内にellipseやlineなどの命令を使い,思い思いに自由に顔を描いてみましょう. 座標原点がスクリーン中心に移動していることに注意.

      my_func_practice_simple_01

      Code

      5.仮引数を元に座標変換

      仮引数iX,iYは顔の座標の平行移動に使いたい. drawFace()の中で,ステップ4で作成した顔描画の前に,座標変換:平行を追加しましょう.

      この方法だとたくさんある図形描画の命令にひとつひとつ追加するより楽.

      Code

      6.座標系の保存・戻しを関数に追加

      ステップ5のように関数内での座標変換は便利だが,関数内で行った座標変換は関数内で戻しておくのが安全. 戻さない場合,プログラムの他の部分に影響がでる.

      以下のようにpushMatrix(), popMatrix()を追加しましょう.

      Code

      7.drawFace()を複数呼び出す

      まず,setup()内のtranslate()文はもう不要なので,削除しましょう. setup()内のdrawFace()呼び出しを,引数を変えながら複数書いてみましょう.

      余裕があれば,for文を使い,さらに大量に書いてみましょう.

      Code

      my_func_practice_simple_02

      第7回:ユーティリティ関数

      Processingにあらかじめ用意されている便利な関数をいくつか紹介する.

      日付

      現在の日,月,西暦を取得する.

      day()

      month()

      year()

      構文

      day() // 日(1 ~ 31) month() // 月(1 ~ 12) Year() // 西暦(2023~)

      Code

      https://processing.org/reference/day_.html

      https://processing.org/reference/month_.html

      https://processing.org/reference/year_.html

      フレーム単位の変化(※非関数)

      秒より小さい単位の変化のアニメーションは,フレーム単位の変化のアニメーションとして実現できる. この場合,時間を取得する関数は用いない. 例えば,「1秒周期で繰り返すアニメーション」は,現在のフレーム番号をグローバル変数として保存し,参照することで実現できる.

      演習1

      1秒で1回転する矩形のアニメーション

      util_anim_per_1rot_05

      以下の手順を参考にしてください.

      1. ウィンドウを表示する.

      Code

      2. 1秒で1回転する矩形の初期描画.

      draw()ブロックに以下の処理を記述する.

      Code

      util_anim_per_1rot_01

      3. 画面の中心に移動させる.

      draw()ブロックに以下の処理を記述する.

      Code

      util_anim_per_1rot_02

      これを回転させたい,rotate()を追加したいが,その前に回転アニメーション用のグローバル変数を追加する.

      4. 現在のフレーム番号を保存するグローバル変数を追加する.

      Code

      5. iFrameCurを用いて回転させる.

      Code

      util_anim_per_1rot_03

      6. 画面をリフレッシュさせる.

      Code

      util_anim_per_1rot_04

      どう見ても1秒で1回転していない. 現在のフレームレートは60なので,1秒間で60°しか回転していない 1秒間で360°回転させるには,毎フレーム回転させる必要がある. この割合はフレームレートによって変わる点に注意.

      7. フレーム毎の回転量を6倍にする.

      Code

      util_anim_per_1rot_05

      見た目はこれで完成だが,将来性を考え,フレーム番号を正しく0~59の間に収める処理を加える.

      8. 1秒経ったらフレーム番号を0に戻す.

      Code

       

      例1

      1秒間で画面を横切る矩形の描画

      Code

      util_anim_per_1translate

      例2

      1秒間で色相環を一周する矩形の描画

      Code

      util_anim_per_1_hue

      例3

      演習1を元に,秒とフレームをリンクさせた例

      ※関数を使用

      Code

      util_anim_per_1rot_second

      プログラムを開始してからの経過時間

      millis()

      プログラムを開始してからの現在の経過時間を,ミリ(千分の一)秒単位で取得できる. 少し難しいが,差分を取ることで細かいアニメーションに応用できる.

      構文

      Code

      ミリ秒単位で3種の時間を表示する

      Code

      millis

      https://processing.org/reference/millis_.html

       

      秒が変わるまでのミリ秒単位のアニメーション

      Code

      millis_arc

      変数のスコープ

      変数にはローカル変数とグローバル変数の二種類の変数がある.

      ローカル変数

      例1

      様々なローカル変数の宣言文

      Code
      Code
      Code

      例2

      for{}ブロック内にfor{}をネストした例

      Code

      例3

      for{}ブロック内にif{}をネストした例

      Code

      例4

      setup{}ブロック内にif{}をネストした例

      Code

      グローバル変数

      使い方

      Code

       

      2次元配列

      Code

      この記述は概念上は下図のようになる.

      concept04

       

      concept03

      このようなメモリ上での配置は直観的に理解しづらいので,概念図で理解したほうが好ましい.

       

      要素数の取得

      構文

      行の要素数の取得
      Code
      列の要素数の取得
      Code

      列の要素数を取得するには,形式上は行番号を指定する必要があるが, 通常は以下のように,0でよい.

      Code

      概念

      例えば以下の記述は,概念上は下図のようになる.

      Code

      array_two_length

      int型の行数が3,列数が4である2次元配列iArrayの行と列の要素数をコンソール出力する.

      Code

      array_two_length_console

      演習4

      int型の行数5,列数2である2次元配列iXYを宣言し,全ての要素を10で初期化するプログラムを書いてみましょう.

       

      宣言+初期化

      Code

      例1

      int型の行数4,列数2である2次元配列iXYの宣言と初期化.

      Code

      例2

      float型の行数3,列数4である2次元配列fRGBの宣言と初期化を行う. さらに配列を表状にコンソール出力する.

      Code

      array_float_rgb_console

      演習5

      int型の行数3,列数2である2次元配列iXYを宣言し,宣言と初期化を同時に行うプログラムを書いてみましょう.

      配列を使った描画

      配列を使い,プログラムを効率化できる場合がある. 使い方毎に以下にまとめる.

      ランダム値を配列に保存する.

      random()が返す値を配列に保存することで,同じ乱数の数列を繰り返し用いることができる.

      ランダムな線の長さをリストとして配列に保存し,回転対称の図を描画する.

      Code

      practive01_02

      配列に数列を代入し,描画に用いる.

      1. 配列の初期化の際,for文において任意の数列を代入するよう記述する.

      2. 描画の際,配列の要素番号によってパターンを選択する.

      例1

      10で始まり,10ずつ増える数列を配列に代入し, 配列の要素を昇順矩形を描画する.

      Code

      example01

      例2

      例1で用いた配列を再利用し,降順とランダムのパターンの描画を行った例.

      Code

      example02

      多次元配列

      int型の3次元配列の宣言文の例

      Code

      rgb_buffer

      ピクセル毎のRGB値を持つ3次元配列を使った描画.

      Code

      example04

       

      ブロック文のネスト

      ネストとは

      if-else のネストの例

      上記のフローチャートをコード化したものが下のプログラム.

      Code

      コメント無しだと以下のような形式.

      Code

      for文の中にif文を入れたネストの例

      例1

      一定の領域にのみランダムで点を描画する例.

      Code

      if_sample

      例2

      4つの領域へのランダム点描の例. for文とif-else文のネストを使っている.

      Code

      if_sample02

      演習9

      例2をベースに,下図のような5つの領域へのランダム点描を行うプログラムを作成してみましょう.

      flow_for_nest_5area_dots

       

      例3

      4つの領域へのランダム点描の例.(縦2×横2) for文と2重のif-else文のネストを使っている.

      Code

      if_nest

      例4

      if-else文を使った日の丸模様のランダム点描.

      Code

      if_else_flow_sample01

      for文の中にfor文を入れたネストの例

      例1

      ウィンドウの全てのピクセルに対して描画を行うfor文のネスト.

      Code

      例2

      ネストの中の繰り返し変数iXの値をコンソール出力する例.

      Code

      flow_for_nest_xy_console

      例3

      ネストの中の繰り返し変数iXiYの値をコンソール出力する例.

      Code

      flow_for_nest_xy_double_console

      処理の流れ
      1. 外側,内側のfor文の繰り返し用変数に初期値が代入される. 内側のブロック文が最初に実行される. flow_for_nest_xy_flow_00

      flow_for_nest_xy_console_00

      1. 内側のfor文が一巡する.(1巡目) コンソール出力のを見ると,変数iX値が1ずつ増えていることが確認できる.

        flow_for_nest_xy_flow_01

      flow_for_nest_xy_console_01

      1. 内側のfor文が終了し,次の文でコンソール出力を改行する.

        flow_for_nest_xy_flow_02

      flow_for_nest_xy_console_01_5

      1. 外側のfor文の変数の更新と条件式の評価が実行される. 変数iYが1に増える. flow_for_nest_xy_flow_03

      2. 内側のfor文の繰り返し用変数に初期値が代入される. 内側のブロック文が実行される.(2巡目開始) コンソール出力のを見ると,変数iY値が1に増えていることが確認できる.

        flow_for_nest_xy_flow_04

      flow_for_nest_xy_console_02

      1. 内側のfor文が一巡する.(2巡目)

        flow_for_nest_xy_flow_01

      flow_for_nest_xy_console_03

      以上のような処理を繰り返している.

       

      演習10

      例3のプログラムをコピーして,以下のようにコンソール出力がされるよう条件式を変更してみましょう.

      flow_for_nest_xy_console_practice

       

      例4

      ウィンドウに正円を並べて描画した例. 繰り返し変数の更新式がiY+=20iX+=20であることに注意.

      Code

      flow_circles_in_window

      例5

      グラデーションのカラーチャート(矩形)

      Code

      flow_for_nest_rects_graduation

      例6

      ネストの中のfor文で,複数の図形を回転させながら繰り返し描画を行う例.

      Code

      flow_for_nest_rects_falling

      演習11

      例6のプログラムに変更を加え,自由に花のような模様を作ってみましょう.

      flow_for_nest_falling_practice

      Code

      for文と変数を使った表現

      制御文とは

      フローチャート(流れ図)

      flow_chart

       

      条件式

      条件式とは

      hishigata

      構文

      2つの値or変数の間にスペースをはさみ,比較演算子(後述)を中に記述する.

      Code

      条件式の種類

      下表の条件を満たしたとき,条件式は真(true)を返し,満たさなければ偽(false)を返す.

      条件式比較演算子条件
      a < b<aがbより小さい
      a <= b<=aがb以下
      a > b>aがbより大きい
      a >= b>=aがbと等しいか大きい
      a == b==aとbが等しい
      a != b!=aがbが等しくない

       

      計算結果(式が返す値)

      条件を満たしたとき,式の結果は真(true)となり,そうでなければ偽(false)となる.

      例1

      条件式の計算結果をprint()する例

      Code

      flow_condition_print

      例2

      算術式と組み合わせた例. 変数iAが偶数ならtrue,奇数ならfalseの計算結果をprint()する.

      Code

      flow_condition_print_true

      処理の順序

      flow_condition_jouyozan

      例3

      変数の初期値に乱数を代入した例. 変数iRandom3の倍数ならtrue,そうでないならfalseの計算結果をprint()する.

      Code

      flow_condition_random_3baisuu

       

      https://processing.org/reference#control

       

      演習1

      int型の変数に乱数(0~100)を代入し,偶数ならtrue,奇数ならfalseの計算結果をコンソール出力する.

      flow_condition_random_even

      繰り返し

      for文

      構文

      Code

      変数の値をコンソール出力する処理を10回繰り返すfor文

      Code

      flow_for_console_10count

      処理の流れ
      1. 変数の宣言

      flow_for_console_10count_flow_01

      1. ブロック文の処理

      flow_for_console_10count_flow_02

      1. 変数の更新式

        この更新式でiIdxに1が加えられる.

      flow_for_console_10count_flow_03

      1. 条件式の評価

      flow_for_console_10count_flow_04

      1. 条件式の結果によって分岐

      flow_for_console_10count_flow_05

      https://processing.org/reference/for.html

       

      演習6

      (for文用の)変数の値をコンソール出力する処理を100回繰り返すfor文を書いてみましょう.

      flow_for_console_100count

       

      for文を使った描画

      乱数を使った繰り返し

      例1

      点をランダムな位置に400個描画する.

      Code

      flow_for_400dots

      例2

      位置,大きさ,色がランダムな円400個描画する例.

      Code

      merit_02

      演習7

      星空のような図の描画

      hoshizora_simple

      例3

      演習7の星空のような図の描画の作例.

      Code

      hoshizora

       

      X座標値0~ウィンドウ幅まで繰り返す

      例1

      繰り返し用変数iXを座標値として使用し,100個の点描画行った例.

      Code

      var_in_loop

      例2

      例4をシステム変数width,heightを用い,ウィンドウを可変にした例.

      Code

      flow_for_naname_line_width

      Y座標値0~ウィンドウ高まで繰り返す

      例1

      繰り返し用変数iYを座標値として使用し,ウィンドウ上部から下部まで水平線を繰り返し描画した例.

      Code

      flow_for_Yloop_lines

      例2

      例6を,線の間隔が5ピクセルになるよう変更した例.

      Code

      flow_for_Yloop_lines_interval

      降順で繰り返す

      下のコードのように書くことで,これまでの昇順と逆順である降順で繰り返すことも可能.

      Code
      Code

      演習8

      下図のような縦線の繰り返しを描画するプログラムを書いてみましょう.

      flow_for_border

       

      while文

      構文

      Code

      Code

      https://processing.org/reference/while.html

      int型変数へ代入する際の注意点

      calc_var_random_mismatch

      演習3

      ストライプ模様の描画の改良 以下のサンプルは,ウィンドウ左から右へ縦長の矩形を25個描画するプログラムである. ※繰り返し文を使用

      Code

      calv_var_practice3_original

      1. 矩形の色を決定している部分の右辺の代入文を改良してみましょう.

      Code

      未整理

      値とは

      数値の記述方法

      整数

      負の値を表現する際はハイフン「-」を先頭に記述する.

      -12

      -213

      1234

      2134567

      実数

      -12.3

      -213.45

      1234.567

      2134567.89

      プログラムにおける記述方法

      演算とは

      コンピュータにとっての計算のこと. 以下のような種類がある.

      演算をプログラム上で表す表現方法がである.

      本章では算術演算を表現する式について学習する.

      文と演算・変数

      命令文 (Imperative Statement)

      Code

      宣言文(Declarative Statement)

      宣言文という文も存在する.

      Code

      文を構成する要素

      文の例要素
      line( 0, 0, 0, a + 1 );
      line( 0, 0, 0, a + 1 );
      line( 0, 0, 0, a + 1 );変数
      line( 0, 0, 0, a + 1 );演算子
      line( 0, 0, 0, a + 1 );命令
      line( 0, 0, 0, a + 1 );

      何ができるのか

      triforce_graph

      Code

      算術式

      算術式とは

      四則演算

      a+baba×ba÷b

      四則演算を表す式

      計算種類
      足し算加算a + b
      引き算減算a - b
      かけ算乗算a * b
      割り算除算a / b

      算術式の文への組み込み

      左記に述べたように,式はそれだけでは機能しない. 文へ組み込む必要がある.

      主な組み込み方

      例1

      print()で,計算の答えをコンソールへ表示する.

      Code

      math_exp_console_sample

      例2

      Code

      math_exp_rects_sample

      除算(割り算)の注意点

      例1

      小数点以下まで算出される記述例.

      Code

      math_exp_shousuu_console_sample

      例2

      小数点以下が切り捨てられる記述例.

      Code

      math_exp_shousuu_console_sample_none

      剰余算

      演算子

      算数(演算記号)プログラム(演算子)記号の読み方日本語キーボードにおけるキーの場所の対応
      ÷%パーセントShift +「え」

      ある数値が偶数か奇数かをコンソールに表示する.

      Code

      math_exp_odd_even_console

      演習1

      以下の数式と同様の計算を行い,答えとなる値をコンソールに表示するプログラムを作成しましょう.

      (1.3×(4.2+5.3)÷2.5×(0.2×6)2.8)×3.9

      ヒント

       

      変数

      アルゴリズムとデータ構造

      1. アルゴリズム

        • 様々な命令を実行する手順

        • 本質的にはコンピュータ言語に依存しない.

      2. データ構造

        • プログラム実行中にメモリにデータを一時的に記憶する.

        • ストレージ(HDDやSSD)ではない.

      変数の要素

      変数は以下の要素で構成される,以降それぞれ詳細を説明する.

      double

      char

      宣言

      構文

      宣言のみ.

      Code

      宣言+初期値の代入

      Code

      例1

      Aという名前のint型の変数を宣言する.

      Code

      例2

      Bという名前のfloat型の変数を宣言する.

      Code

      例3

      ABCという名前のfloat型の変数を宣言し,初期値を代入する.

      Code

      例4

      カンマで区切り,複数の変数を宣言できる.

      Code

      例5

      初期値として数式(の計算結果)を代入.

      Code

      変数名

      変数名の制限

      変数名の1文字目は英字

      Code

      予約語は変数名として使用できない.

      Code

      代入文

      構文

      =を用いるが,数式における「=」と意味合いが異なる点に注意.

      Code

      数値型

      Code

      文字型

      Code

      文への組み込み

      変数も算術式と同様に値を持つため,文の中に組み込むことができる.

      主な組み込み方

      widthとheight

      width

      height

       

      良い変数名をつける

      複数単語の区切り

      Code
      Code

      頭文字にデータ型の頭文字を小文字で付ける

      変数の型を変数名を見ただけで判別できる工夫

      Code

      (固有)名詞

      変数名の最初の方につけるのがよい.

      Code

      単位・性質

      変数名の後ろの方につけるのが好ましい.

      Code

      計算値による修飾子

      変数名の最後につけるのがよい.

      Code

      変数によって各部のサイズ・色を変えられる家の描画. 変数名に注目.

      Code

      house01

      演習2

      変数を使って円を描画してみましょう. 大まかには,以下のような構造になります.

      Code
      1. 3つの変数の宣言文を記述しましょう.

        • 宣言文中で初期値の代入も行いましょう.

        • 変数名,型,初期値は自由ですが,以下を加味しましょう.

          • 変数Aは円の中心座標のXの値となる.

          • 変数Bは円の中心座標のYの値となる.

          • 変数Cは円の大きさの値となる.

        • 初期値は後で変更可能なので,仮の値でも構いません.

      2. 円の描画命令circle()に3つの変数を組み込みましょう.

      3. 実行し,描画結果を確認しましょう.

      4. 円がウィンドウ内に収まるように変数の値を調整しましょう.

      例2

      sin()を使ったシンプルな波形の描画. ※未修得の繰り返し文を用いています.

      Code

      sin_simple_wave_sample

      三角関数と三角比

      三角関数は三角比として使うこともできる.

      triangle_func_def

      例2

      座標変換を使わず,三角比によって時計の針状の表現を行う.

      calc_variable_sincos_line

      Code

      triangle_func

      例3

      三角関数とべき乗の計算を使った螺旋状の表現 ※未修得の繰り返し文を用いています.

      Code

      rasen01

       

       

      simple_flower

      1. 座標系をスクリーン中心へ平行移動し,花弁用の楕円を1つ描画する.

        楕円は少しX軸方向(右方向)へずらしておく.(これには平行移動は使わないこと)

        simple_flower_firstellipse

      2. 座標系を72°回転させて同じ楕円を1つ描画する.

        simple_flower_secondellipse

      3. ステップ2を繰り返し,計5個の楕円を描画する.

        simple_flower_5ellipses

      4.  

      以下完成プログラム

      Code

       

      演習4

      図形を一つ自由に描画してみましょう.

      条件

      draw_practice01

      ※下に答えの一例がありますが,最初は見ずに自分でやってみましょう.

      Code

      色見本

      色相と彩度のグラデーション

      カラーモード指定において,カラーモデルとしてHSBを用いる場合, 色相と彩度の関係は下の図を参考にしてみてもよい.

      Code

      hue_sat

      R値とG値のグラデーション

      Code

      colormodel_rg

      演習

      1. 100個の円をランダムな位置に描画 (※if else の演習ステップ1と同じ )

      Code

      practice01_01

      1. 条件分岐を追加.

        • もしXの値が100未満で,

          • Yの値が100未満なら,色を赤に設定

          • そうでなければ,黒に設定

        • Xの値が100未満ではなく,

          • Yの値が100未満なら色を青に設定

          • そうでなければ白に設定

          下の答えを見る前にまずやってみましょう.

      practice03_02

      Code

       

       

      演習

      1. 100個の円をランダムな位置に描画

      Code

      practice01_01

      1. 条件分岐を追加.

        • もしXの値が100未満であれば色を赤に設定

        • そうでなければ色を青に設定.

        下の答えを見る前にまずやってみましょう.

      practice01_02

      Code

       

      演習
      1. 100個の円をランダムな位置に描画 (※ウィンドウサイズ300*200)

      Code

      practice02_01

      1. 条件分岐を追加.

        • もしXの値が100未満であれば色を赤に設定

        • もしXの値が200未満であれば色を緑に設定

        • そうでなければ色を青に設定.

          下の答えを見る前にまずやってみましょう.

      Code

      practice02_02

       

      ####

      二次元配列を使った,竹藪のような表現

      Code

      junk01

      二次元配列を使ったパッチの繰り返し

      Code

      junk02

       

      ランダムな楕円のフェードアニメーション

      ellipse_fade

      1. 空のsetup()draw()を用意

      できれば下の答えを見る前にやってみましょう.

      Code

      2. setup()に以下の処理を追加

      できれば下の答えを見る前にやってみましょう.

      Code

      3. draw()に以下の処理を追加

      ellipse_fade_01

      できれば下の答えを見る前にやってみましょう.

      Code

      4. スクリーンのリフレッシュ処理を追加

      ellipse_fade_02

      できれば下の答えを見る前にやってみましょう.

      Code

      5. スクリーンリフレッシュのアルファ値を50%に変更

      できれば下の答えを見る前にやってみましょう.

      Code

       

      curveによる螺旋描画

      Code

      curve_rasen

      円周上に花を描画する

      Code

      junk03

      惑星クラスによる太陽系の描画

      Code

      class_planet

      ハノイの塔

      以下のルールに従ってすべての円盤を右端の杭に移動させられれば完成.

      Code

      recursive_hanoi